Выпадающее меню почему-то не работает

Я прошел через W3Schools, чтобы попытаться понять структуру кодирования выпадающих меню. При открытии страницы и наведении курсора на текст «Merch» предполагается отобразить выпадающее меню. Однако по какой-то причине он не отображается. Пожалуйста, усились для меня и покажи мне, где я ошибся.Выпадающее меню почему-то не работает

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
ul { 
    margin: 0; 
    overflow: hidden; 
    background-color: dimgray; 
    list-style-type: none; 
} 

li { 
    float: left; 
} 

li a { 
    text-decoration: none; 
    font-family: sans-serif; 
    display: inline-block; 
    color: white; 
    padding: 12px; 
} 

li a:hover { 
    background-color: gray; 
} 

#dropdown { 
    position: absolute; 
    display: none; 
    background-color: darkgray; 
    min-width: 140px; 
} 

#dropdown a { 
    color: white; 
    text-align: left; 
    padding: 10px; 
    display: block; 
    text-align: left; 
} 

#dropdown a:hover { 
    background-color: gray; 
} 

#dropbtn:hover #dropdown { 
    display: block; 
} 
    </style> 
    </head> 
    <body> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#" id="dropbtn">Merch</a> 
     <div id="dropdown"> 
      <a href="#">Shirts</a> 
      <a href="#">Pants</a> 
     </div> 
     </li> 
     <li><a href="#">About Us</a></li> 
    </ul> 
    </body> 
</html>

источник

2017-01-12 JRB

Вам нужно это изменение в CSS

#dropbtn:hover + #dropdown { 
    display: block; 
}

Dropdown не ребенок, то следующий элемент в текущей настройки HTML, так это selector найдет.

Или лучше, место идентификатор на Li элемент (родитель):

<ul> 
     <li><a href="#">Home</a></li> 
     <li id="dropbtn"><a href="#" >Merch</a> 
     <div id="dropdown"> 
      <a href="#">Shirts</a> 
      <a href="#">Pants</a> 
     </div> 
     </li> 
     <li><a href="#">About Us</a></li> 
    </ul> 


#dropbtn:hover #dropdown { 
    display: block; 
}

Демо: https://jsfiddle.net/3bfgzf37/

Если вы используете первое решение, выпадающие быстро пропадает, и ведут себя странно .. . Пояснение: hover on a is не наведите указатель мыши на выпадающий список (a is sibling), наведите указатель мыши на элемент li, в то же время наведите указатель мыши в раскрывающемся списке (parent-child, dropdown - «внутри» li - это создает согласованное, желаемое, поведение).

Второй вариант лучше.

ul { 
 
    margin: 0; 
 
    overflow: hidden; 
 
    background-color: dimgray; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 12px; 
 
} 
 

 
li a:hover { 
 
    background-color: gray; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    display:none; 
 
    background-color: darkgray; 
 
    min-width: 140px; 
 
} 
 

 
#dropdown a { 
 
    color: white; 
 
    text-align: left; 
 
    padding: 10px; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
#dropdown a:hover { 
 
    background-color: gray; 
 
} 
 

 
#dropbtn:hover #dropdown { 
 
    display: block; 
 
}

<ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li id="dropbtn"><a href="#" >Merch</a> 
 
     <div id="dropdown"> 
 
      <a href="#">Shirts</a> 
 
      <a href="#">Pants</a> 
 
     </div> 
 
     </li> 
 
     <li><a href="#">About Us</a></li> 
 
    </ul> 
 

 
<h3>Dropdown Menu inside a Navigation Bar</h3> 
 
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

источник

2017-01-12 01:05:58 sinisake

Wow! Спасибо! Я не знал, что идентификатор был введен в элемент a. – JRB

Ваш стиль тег должен быть вне головы тега. Кроме того, выпадающий список этого кода работает сейчас. Просто сделайте небольшое изменение цвета к вашему желанию. :)

<html> 
<head></head> 
<style> 
ul { 
    margin: 0; 
    overflow: hidden; 
    background-color: dimgray; 
    list-style-type: none; 
}  
li { 
    float: left; 
} 
li a { 
    text-decoration: none; 
    font-family: sans-serif; 
    display: inline-block; 
    color: white; 
    padding: 12px; 
} 
/* Dropdown Button */ 
.dropbtn { 
background-color: #4CAF50; 
color: white; 
padding: 16px; 
font-size: 16px; 
border: none; 
cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

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

/* Change the background color of the dropdown button when the dropdown  content is shown */ 
.dropdown:hover .dropbtn { 
background-color: gray; 
} 
</style> 
<body> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li> 
     <div class="dropdown"> 
     <button class="dropbtn">Merch</button> 
     <div class="dropdown-content"> 
      <a href="#">Shirts</a> 
      <a href="#">Pants</a> 
     </div> 
     </div> 
    </li> 
    <li><a href="#">About Us</a></li> 
</ul> 
</body> 
</html>

источник

2017-01-12 01:20:56

Выпадающее меню почему-то не работает

ответ

Смежные вопросы