級別2子菜單總是可見的

Question

我花了幾乎整整一天，通過各種例子，仍然無法找出設置2級子菜單隱形的方式。我得到了這個網絡模板並試圖對其進行定製。

這裏是css文件導航比特（我知道這看起來很難看）：）

#navigation { height: 35px; line-height: 35px; float: right; position: relative; z-index: 20; } 
#navigation ul { list-style: none; list-style-position: outside; font-size: 13px; text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; } 
#navigation ul li { float: left; position: relative; padding-right: 2px; background: url(images/navigation-border.png) no-repeat right 0; } 
#navigation ul > li.last { background: transparent; width: auto; float: left; padding-right: 0; } 
#navigation ul > li.last a { border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; border-right: 1px solid #d7e1e8 !important; } 
#navigation ul > li.first a { border-radius: 5px 0px 0px 5px ; -moz-border-radius: 5px 0px 0px 5px ; -webkit-border-radius: 5px 0px 0px 5px ; -o-border-radius: 5px 0px 0px 5px; border-left: 1px solid #d7e1e8 !important; } 
#navigation ul li a { color: #324957; float: left; padding: 0 18px; border: 1px solid #d7e1e8; border-left: 0; border-right: 0; background: url(images/navigation.png) repeat 0 0; } 
#navigation ul li a:hover, 
#navigation ul li.active a { background: url(images/navigation-a.png) repeat 0 0; color: #3995d6; text-decoration: none; } 

#navigation ul li a span { background: url(images/navigation-arr.png) no-repeat right 0; width: 10px; height: 6px; float: right; padding-left: 3px; margin-top: 14px; } 

#navigation ul li ul { display: none; float: none; line-height: 28px; position: absolute; top: 35px; left: 0; width: 100%; background: #e1efff; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; } 
#navigation ul li:hover ul { visibility: visible; } 

#navigation ul li ul li { display: block; float: none; padding: 0; background: transparent; } 
#navigation ul li ul li a { float: none; display: block !important; padding: 0 18px; } 
#navigation ul li ul li a:hover { float: none; display: block; background: transparent; background-color: #bdd7f4; } 
#navigation ul li.last ul li a { padding: 0 18px !important; float: none; display: block; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} 
#navigation ul li ul li.last { float: none; display: block; } 
#navigation ul li ul li.last a { border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; } 

#navigation ul li ul li.first a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} 
#navigation ul li.first ul li a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;} 

這裏是我想寫一個子菜單

<nav id="navigation"> 
          <ul> 
          <li><a href="#">Individual Patient Analysis</a></li> 
          <li> 
          <a href="#">Multiple Patient Analysis<span></span></a> 
           <ul> 
            <li><a href="#">Gender</a></li> 
            <li><a href="#">Age</a></li> 

            <li><a href="#">Field Number</a></li> 
            <li><a href="#">Occupation</a></li> 
            <li><a href="#">Eye<span></span></a> 
           <ul> 
            <li><a href="#">Left</a></li> 
            <li><a href="#">Right</a></li> 
           </ul> 
           </li> 
           </ul> 
          </li> 


          <li><a href="#">Upload File</a></li> 

         </ul> 
        </nav> 

問題這裏是眼睛的2級子菜單總是可見的，甚至沒有在'眼睛'選項卡上懸停，我似乎無法修復它。我只想在「眼睛」選項卡上懸停時，「左」和「右」子菜單纔會出現。我在小提琴中發現的另一個問題是菜單隱藏在左右子菜單上。它如何被修復？

任何幫助將不勝感激！

Answer 1

您最初使用display:none，並嘗試在li項目，它就不懸停使用visibility:visible隱藏在下拉菜單中顯示在所有的下拉菜單。

更改此

#navigation ul li:hover ul { 
    visibility: visible; 
} 

下面顯示只顧眼前的孩子ul項目父li項目。

#navigation li:hover > ul { 
    display:block; 
} 

DEMO

Answer 2

http://jsfiddle.net/ZhWkP/10/
http://jsfiddle.net/ZhWkP/10/show

您使用顯示：無隱藏第二級UL，比使用可視性設置爲可見懸停。

/* apply a natural box layout model to all elements */ 
*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 

#navigation ul ul ul { 
     float: none; 
     line-height: 28px; 
     position: absolute; 
     visibility: hidden; 
     width: 100%; 
     padding: 0 0 0 10px; /* allows to set padding to 100% element. */ 
} 

#navigation ul ul li:hover ul { 
     visibility: visible; 
} 

Answer 3

檢查這一點，它可以幫助你。

DEMO

CSS

ul, ul li { 
    list-style-type:none; 
    float:left; 
    padding:5px; 
} 
ul li a { 
    text-decoration:none; 
} 
li ul { 
    display:none; 
    position:absolute; 
} 
li ul li { 
    float:none; 
} 
ul li:hover ul { 
    display:block; 
} 
ul li:hover ul ul { 
    display:none; 
} 
ul li ul li:last-child:hover ul { 
    display:block; 
}