导航下拉菜单超出导航高度

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 */
}

现在应该可以用了，

为了获得更好的结果，向"srvices“li添加一个id

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

并将上面的函数替换为这个函数：

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