css menu скользящие подэлементы скрываются, когда наведите указатель вместо изменения цвета

Вчера я нашел код для создания скользящего меню только с помощью css. Все отлично работает, когда в моем файле css я устанавливаю стили для всех элементов ul, li, a. Проблема возникает, когда я пытаюсь создать списки стилей в конкретном div, тогда, когда я наводил верхний элемент, появляются подэлементы, но когда я пытаюсь указать на них, они скрывают working it_hides_when_hover. Может ли кто-нибудь объяснить, почему в div он не работает?css menu скользящие подэлементы скрываются, когда наведите указатель вместо изменения цвета

#nav ul { 
 
\t list-style-type:none; 
 
\t margin:0; 
 
\t padding:0; 
 
\t position: absolute; 
 
} 
 

 
/*Create a horizontal list with spacing*/ 
 
    #nav li { 
 
\t display:inline-block; 
 
\t float: left; 
 
\t margin-right: 1px; 
 
} 
 

 
/*Style for menu links*/ 
 
#nav li a { 
 
\t display:block; 
 
\t min-width:140px; 
 
\t height: 50px; 
 
\t text-align: center; 
 
\t line-height: 50px; 
 
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t color: #fff; 
 
\t background: #2f3036; 
 
\t text-decoration: none; 
 
} 
 

 
/*Hover state for top level links*/ 
 
#nav li:hover a { 
 
\t background: #19c589; 
 
} 
 

 
/*Style for dropdown links*/ 
 
#nav li:hover ul a { 
 
\t background: #f3f3f3; 
 
\t color: #2f3036; 
 
\t height: 40px; 
 
\t line-height: 40px; 
 
} 
 

 
/*Hover state for dropdown links*/ 
 
#nav li:hover ul a:hover { 
 
\t background: #19c589; 
 
\t color: #fff; 
 
} 
 

 
/*Hide dropdown links until they are needed*/ 
 
#nav li ul { 
 
\t display: none; 
 
} 
 

 
/*Make dropdown links vertical*/ 
 
#nav li ul li { 
 
\t display: block; 
 
\t float: none; 
 
} 
 

 
/*Prevent text wrapping*/ 
 
#nav li ul li a { 
 
\t width: auto; 
 
\t min-width: 100px; 
 
\t padding: 0 20px; 
 
} 
 

 
/*Display the dropdown on hover*/ 
 
#nav ul li a:hover + .hidden, .hidden:hover { 
 
\t display: block; 
 
}

<html> 
 
<head> 
 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> 
 
<TITLE>Tytuł strony!</TITLE> 
 
<link rel="stylesheet" type="text/css" href="style2.css"> 
 
<META NAME="description" CONTENT="Site description"> 
 
<META NAME="robots" CONTENT="ALL"> 
 
    
 
</head> 
 
<body> 
 
    <div id="nav"> 
 
     <ul id="menu"> 
 
      <li><a href="#">GALERRY</a> 
 
       <ul class="hidden"> 
 
        <li><a href="#">ConceptArt</a></li> 
 
        <li><a href="#">Videos</a></li> 
 
       
 
       </ul> 
 
      </li> 
 
      <li><a href="#">INFO</a></li> 
 
      <li><a href="#">CONTACT</a></li> 
 
      <li><a href="#">ABOUT</a> 
 
       <ul class="hidden"> 
 
        <li><a href="#">We do</a></li> 
 
        <li><a href="#">We are</a></li> 
 
       </ul> 
 
      </li> 
 
      
 
     </ul> 
 
     
 
     </div> 
 
    </body> 
 
</html>

источник

2016-01-31 Wini the Pooh

попробуйте добавить это к вашему стилю ul#menu li:hover .hidden{display:block}

источник

2016-01-31 16:20:41 Yupage

все получилось очень много, но не могли бы вы объяснить, почему он не работал раньше? –

Код ul # menu li: hover .hidden {display: block} отсутствует – Yupage

Вот модифицированный пример:

http://codepen.io/xvariant/pen/pgKxwp

#nav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
} 
 
/*Create a horizontal list with spacing*/ 
 

 
#nav li { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 1px; 
 
} 
 
/*Style for menu links*/ 
 

 
#nav li a { 
 
    display: block; 
 
    min-width: 140px; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    color: #fff; 
 
    background: #2f3036; 
 
    text-decoration: none; 
 
} 
 
/*Hover state for top level links*/ 
 

 
#nav li:hover a { 
 
    background: #19c589; 
 
} 
 
/*Style for dropdown links*/ 
 

 
#nav li:hover ul a { 
 
    background: #f3f3f3; 
 
    color: #2f3036; 
 
    height: 40px; 
 
    line-height: 40px; 
 
} 
 
/*Hover state for dropdown links*/ 
 

 
#nav li:hover ul a:hover { 
 
    background: #19c589; 
 
    color: #fff; 
 
} 
 
/*Hide dropdown links until they are needed*/ 
 

 
#nav li ul { 
 
    display: none; 
 
} 
 
/*Make dropdown links vertical*/ 
 

 
#nav li ul li { 
 
    display: block; 
 
    float: none; 
 
} 
 
/*Prevent text wrapping*/ 
 

 
#nav li ul li a { 
 
    width: auto; 
 
    min-width: 100px; 
 
    padding: 0 20px; 
 
} 
 
/*Display the dropdown on hover*/ 
 

 
#nav ul li:hover .hidden { 
 
    display: block; 
 
}

<div id="nav"> 
 
    <ul id="menu"> 
 
    <li><a href="#">GALERRY</a> 
 
     <ul class="hidden"> 
 
     <li><a href="#">ConceptArt</a> 
 
     </li> 
 
     <li><a href="#">Videos</a> 
 
     </li> 
 

 
     </ul> 
 
    </li> 
 
    <li><a href="#">INFO</a> 
 
    </li> 
 
    <li><a href="#">CONTACT</a> 
 
    </li> 
 
    <li><a href="#">ABOUT</a> 
 
     <ul class="hidden"> 
 
     <li><a href="#">We do</a> 
 
     </li> 
 
     <li><a href="#">We are</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 
    </ul> 
 

 
</div>

источник

2016-01-31 16:37:08

Спасибо, но почему он раньше не работал? –

Ваш css был для 'a: hover' вместо li, который содержит как кнопку, так и подпункты. Я помещаю 'display: block' на' hidden' ul в 'li: hover'. Ли также содержит подпозиции. Таким образом, когда курсор находится в любом месте этого li, подпункты будут видны. –

'#nav ul li: hover .hidden { дисплей: блок; } ' Это модифицированная часть. –

css menu скользящие подэлементы скрываются, когда наведите указатель вместо изменения цвета

ответ

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