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

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

---

为获得更好的结果，请在“服务”li 中添加一个 id：

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

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

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

Demo