У меня есть панель навигации, в которой я хочу использовать раскрывающиеся меню, но в w3schools, в которой я обнаружил, элементы отображаются в одной строке + изменение цвета фона при наведении слишком велико. может кто-нибудь взглянуть на это и сказать мне, что идет не так?

https://fiddle.jshell.net/e7zLx39u/

1
Volcan 3 7 Сен 2016 в 21:34

5 ответов

Лучший ответ
  1. у вас есть .nav-item-holder a {display: inline}, где вы на самом деле хотите, чтобы display: block;
  2. Я бы также добавил .nav-item-holder .dropdown-content a { padding-left: 0; padding-right: 0; }, чтобы убедиться, что у вас нет прыжков предметов при наведении на них.

Вот рабочая версия вашего кода, исправьте (с двумя моими предложениями)

.nav-wrapper {
	position: fixed;
	color:#151618;
	background-color:#151618;
	width:100%;
	border-bottom:4px solid #0bb1ff;
	height:50px;
	z-index:1;
	margin-top:0 auto;
}

.nav-logo {
	width:45px;
	position:absolute;
	z-index:2;
	top:5%;
}	

.nav-item {
	float:left;
}

.dropbtn {
    background-color: #151618;
    display: inline-block;
    height:100%;
	padding-left:10px;
	padding-right:10px;
	color:#0bb1ff;
	text-decoration: none;
    border: none;
    cursor: pointer;
}

.dropbtn:hover {
	color:#fff;
	height:100%;
	background-color:#0bb1ff;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    background-color: #151618;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #151618;
    border:3px solid #0bb1ff;
    text-align: center;
    width:180px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #0bb1ff;
    text-decoration: none;
    display: block;
    padding: 0;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff; width:100%;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: inline-block;
    clear:both;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #0bb1ff;
}

.dropdown:hover .dropbtn {
	color:#fff;
}

.nav-item-holder {
	z-index:3;
	color:#151618;
	font:14px verdana;
	line-height:50px;
	left:50px;
	position:absolute;
}

.nav-item-holder a {
	display: block;
	padding-left:10px;
	padding-right:10px;
	color:#0bb1ff;
	text-decoration: none;
}

.nav-item-holder a:hover {
	position:relative;
	color:#fff;
	text-decoration: none;
	background-color:#0bb1ff;
	height:100%;
}
.nav-item-holder .dropdown-content a {
  padding-left: 0;
  padding-right: 0;
}
.active {
	position:relative;
	color:#fff;
	text-decoration: none;
	background-color:#0bb1ff;
	height:100%;
}

.user-image {
	width: 30px;
	height: 30px;
	position:absolute;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	border-radius: 99em;
	border: 2px solid #0bb1ff;
	top:8px;
	right:30px;
}

.nav-user {
	line-height: 50px;
	color:#fff;
	position:absolute;
	right:0;
}

.nav-user span {
	display:inline-block;
	position: absolute;
	right:70px;
}

.nav-user-drop {
	position:absolute;
	display:none;

}

.nav-user:hover .nav-user-drop {
	display:block;
}

.user-drop {
	padding:5px;
	text-align: center;
	background-color:#151618;
	color:#0bb1ff;
}
<div class="nav-wrapper">
  <div class="nav-content">
    <a class="nav-logo" href="/"><img src="/assets/images/templates/volcan.png" class="nav-logo"/></a>

    <div class="nav-item-holder">
      <div class="nav-item"><a href="" >Forum</a></div>
      <div class="nav-item"><a href="" >Article</a></div>
     
      <div class="dropdown">
        <div class="dropbtn">Discover</div>
        <div class="dropdown-content">
          <a href="#">Top</a>
          <a href="#">Recent</a>
          <a href="#">Verified</a>
        </div>
      </div>   
    </div>


    <form>
      <!--Gone add search bar-->
    </form>


 
    </div>
    <div class="nav-user-drop">
      <a href="" class="user-drop">Profile</a>
      <a href="" class="user-drop">Inbox</a>
      <a href="" class="user-drop">Settings</a>
      <a href="" class="user-drop">Sign Out</a>
    </div>

  </div>
</div>
0
Dekel 7 Сен 2016 в 18:44

Попытайся:

* {
  box-sizing: border-box;
}

.nav-wrapper {
	position: fixed;
	color:#151618;
	background-color:#151618;
	width:100%;
	border-bottom:4px solid #0bb1ff;
	height:50px;
	z-index:1;
	margin-top:0 auto;
}

.nav-logo {
	width:45px;
	position:absolute;
	z-index:2;
	top:5%;
}	

.nav-item {
	float:left;
}

.dropbtn {
    background-color: #151618;
    display: inline-block;
    height:100%;
	padding-left:10px;
	padding-right:10px;
	color:#0bb1ff;
	text-decoration: none;
    border: none;
    cursor: pointer;
}

.dropbtn:hover {
	color:#fff;
	height:100%;
	background-color:#0bb1ff;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    background-color: #151618;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #151618;
    border:3px solid #0bb1ff;
    text-align: center;
    width:180px;
}

/* Links inside the dropdown */
.nav-item-holder .dropdown-content a {
    color: #0bb1ff;
    text-decoration: none;
    display: block !important;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff; width:100%;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: inline-block;
    clear:both;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #0bb1ff;
}

.dropdown:hover .dropbtn {
	color:#fff;
}

.nav-item-holder {
	z-index:3;
	color:#151618;
	font:14px verdana;
	line-height:50px;
	left:50px;
	position:absolute;
}

.nav-item-holder a {
	display: inline-block;
	padding-left:10px;
	padding-right:10px;
	color:#0bb1ff;
	text-decoration: none;
}

.nav-item-holder a:hover {
	position:relative;
	color:#fff;
	text-decoration: none;
	background-color:#0bb1ff;
	height:100%;
}

.active {
	position:relative;
	color:#fff;
	text-decoration: none;
	background-color:#0bb1ff;
	height:100%;
}

.user-image {
	width: 30px;
	height: 30px;
	position:absolute;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	border-radius: 99em;
	border: 2px solid #0bb1ff;
	top:8px;
	right:30px;
}

.nav-user {
	line-height: 50px;
	color:#fff;
	position:absolute;
	right:0;
}

.nav-user span {
	display:inline-block;
	position: absolute;
	right:70px;
}

.nav-user-drop {
	position:absolute;
	display:none;

}

.nav-user:hover .nav-user-drop {
	display:block;
}

.user-drop {
	padding:5px;
	text-align: center;
	background-color:#151618;
	color:#0bb1ff;
}
<div class="nav-wrapper">
  <div class="nav-content">
    <a class="nav-logo" href="/"><img src="/assets/images/templates/volcan.png" class="nav-logo"/></a>

    <div class="nav-item-holder">
      <div class="nav-item"><a href="" >Forum</a></div>
      <div class="nav-item"><a href="" >Article</a></div>
     
      <div class="dropdown">
        <div class="dropbtn">Discover</div>
        <div class="dropdown-content">
          <a href="#">Top</a>
          <a href="#">Recent</a>
          <a href="#">Verified</a>
        </div>
      </div>   
    </div>


    <form>
      <!--Gone add search bar-->
    </form>


 
    </div>
    <div class="nav-user-drop">
      <a href="" class="user-drop">Profile</a>
      <a href="" class="user-drop">Inbox</a>
      <a href="" class="user-drop">Settings</a>
      <a href="" class="user-drop">Sign Out</a>
    </div>

  </div>
</div>
0
HamSter 7 Сен 2016 в 18:45

Во-первых, я не знаю, полностью ли это дубликат, поэтому просто поместите ссылку здесь

Затем я изменил ширину поля со 180 пикселей на 80 пикселей, и проблема была решена. Но, как правило, вы можете захотеть изменить .nav-holder-item {display : inline; } на { display: block; } в CSS.

Надеюсь это поможет.

0
Community 23 Май 2017 в 12:08

Подпункты установлены на встроенный блок. Если вы закомментируете следующую строку, это должно разобраться, и все они будут располагаться друг под другом.

.nav-item-holder a {
    /* display: inline-block; */
}

Не уверен, что это все покрывает; дайте мне знать, и я дополню ответ.

0
Whothehellisthat 7 Сен 2016 в 18:45

Удалите ширину из состояния наведения и добавьте ее в класс, а также вычтите отступы, которые вы дали ей в образце.

.dropdown-content a {
    color: #0bb1ff;
    text-decoration: none;
    display: block;
    width: calc(100% - 20px);
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff;}
0
Rudi Urbanek 7 Сен 2016 в 18:46