css菜單滑動子元素隱藏時懸停而不是改變顏色

昨天我發現一個代碼只能用css製作滑動菜單。一切都很好，當我在我的CSS文件中設置所有ul，li，元素的樣式。當我嘗試在混凝土div中設置樣式列表時出現問題，然後當我將鼠標懸停在頂部元素上時，出現子元素，但是當我試圖指向它們時，它們會隱藏working it_hides_when_hover。任何人都可以解釋爲什麼在div它不起作用？css菜單滑動子元素隱藏時懸停而不是改變顏色

#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'放在'li：hover'中的'hidden' ul上。 li也包含子項目。這種方式當光標在那裏的任何地方時，子項目將是可見的。 –

'#nav ul li：hover .hidden { display：block; }' 這是修改後的部分。 –

css菜單滑動子元素隱藏時懸停而不是改變顏色

回答

相關問題