導航下拉菜單超出資產淨值高度

Question

我有這個爲例dropdown exemple

我的問題是，我想告訴懸停在所有子項的能力沒有現在增加了導航的高度我只能懸停在servic1 如果我增加高度，我可以控制多個子項

HTML: 
<ul id="nav"> 
      <div class="wrap"> 
       <a id="Faccebook" href="#" > <img src="../zeela/img/Facebook.png" /></a> 

       <li> 
        <a  href="#">home</a> 
       </li> 
       <li> 
        <a href="#">about</a> 
       </li> 
       <li> 
        <a href="#" >srvices</a> 
        <ul id = "sub_menu"> 
         <li> 
          <a href="#" >servic1</a> 
         </li> 
         <li> 
          <a href="#" >servic2</a> 
         </li> 
         <li> 
          <a href="#" >servic3</a> 
         </li> 
         <li> 
          <a href="#" >servic4</a> 
         </li> 
         <li> 
          <a href="#" >servic5</a> 
         </li> 

        </ul> 
       </li> 
      </div> 
    </ul> 
    <div class="wrap"> 
     <div id="MainTitle" > 
      main titel text 
     </div> 
    </div> 

CSS

ul#nav img { 
position:relative;top:0;bottom:0;margin:auto; 
vertical-align: top; 
padding-right: 20px; 
} 

#home { 
font-size: 14px; 
text-align: right; 
} 

ul#nav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 100%; 
height:45px; 
background-color: #e2e2e2; 
-moz-box-shadow: 1px 6px 1px #888;  
-webkit-box-shadow: 1px 6px 1px #888; 
box-shadow: 1px 6px 1px #888; 

} 

ul#nav li { 
float: left; 
} 

ul#nav li a { 
text-decoration: none; 
display: block; 
text-align:center; 
padding-left: 10px; 
padding-top: 10px; 
font-family: Tahoma; 
font-size: 16px; 
color: #666666; 
font-weight: bold; 
z-index:9999; 
} 
ul#nav li a:hover { 
font-family: Tahoma; 
font-size: 14px; 
color: #000000; 
font-weight: bold; 
} 
ul#nav li a:focus { 
font-family: Tahoma; 
font-size: 14px; 
color: #000000; 
font-weight: bold; 
} 
ul#nav li ul { 
position: absolute; 
display: none; 
} 
    ul#nav li ul li { 
list-style-type: none; 
float: none; 
    } 


#MainTitle { 
padding-bottom: 50px; 
padding-top: 50px; 
padding-right: 30px; 
font-family: Tahoma; 
font-size: 35px; 
color: #535353; 
z-index: 9; 
} 

.wrap { 

    position:relative; 
    margin:0 auto; 
      /*replace 900px with your width*/ 
    width:960px; 


} 

的jQuery

$("#nav").hover(function() { 
     $("#sub_menu").show(); 
     }, function() { 
     $("#sub_menu").hide(); 
     });​ 

Answer 1

與此一更換您的jQuery函數：

$("#nav").on('mouseover',function() { 
    $("#sub_menu").show(); 
}); 
$("#sub_menu").on('mouseout',function() { 
    $(this).hide(); 
});​ 

，加入一個較高的z-index到您的子菜單：

ul#nav li ul { 
    position: absolute; 
    display: none; 
    z-index:10; /* add this line */ 
} 

應該現在的工作，demo

---

爲了更好的結果，添加一個ID爲 「srvices」 li：

<li id="subMenuSrvicesContainer"> 
<a href="#" >srvices</a> 
/* ...etc... */ 

而且替換功能上面這一個：

$("#subMenuSrvicesContainer").on('mouseover',function() { 
    $("#sub_menu").show(); 
}); 
$("#sub_menu").on('mouseout',function() { 
    $(this).hide(); 
});​ 

Demo