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

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;


 }

j查询

 $("#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 添加到“服务”li:

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

并用这个函数替换上面的函数:

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

Demo