0

我有这个示例下拉示例

我的问题是我想在不增加导航高度的情况下扩展悬停在所有子项目上的能力现在我只能将鼠标悬停在 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();
       });​

​</p>

4

1 回答 1

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" 中添加一个 id li：

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

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

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

演示

于 2012-10-06T11:18:26.053 回答