二级下拉导航

Question

如下图所示，子菜单1在子菜单下方留下白色填充，并且不会与子菜单位于同一级别。我在CSS中出错了。有人可以请帮助。谢谢。

IMG http://i42.tinypic.com/2mms5dz.png

的代码如下

 <div class="nav" style="height:40px;"> 
        <ul> 
         <li style="width: 65px; height: 40px;"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 85px; height: 40px"><a href="~/" runat="server">menu</a> 
          <ul> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 160px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
          </ul> 
         </li> 
         <li style="width: 125px; height: 40px"><a href="#" runat="server">menu</a> 
          <ul> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu</a></li> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu</a> 
           <ul> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
           <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
            <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
            <li style="width: 220px; height: 40px"><a href="~/" runat="server">submenu1</a></li> 
           </ul> 
           </li> 
          </ul>        
         </li> 
         <li style="width: 95px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 65px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 110px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 145px; height: 40px"><a href="~/" runat="server">menu</a></li> 
         <li style="width: 180px; height: 40px"><a href="~/" runat="server">menu</a></li></ul>      
        </div> 


CSS: 

    .nav ul, li 
    { 
     margin: 0; 
     padding: 0;   
     font-family: Tahoma; 
     font-size: 10pt; 
     text-decoration: none; 
     line-height: 40px; 
     list-style :none; 
    }  

    .nav ul 
    { 
     position: relative; 
     text-align : center; 
    } 


    .nav ul li 
    { 
     float: left; 
     list-style: none; 
     border-right: gray thin solid; 
     border-bottom: gray thin solid; 
     background-image: url(Images/Icons/top-nav-back.jpg); 
     display:inline-block;    
    } 

    .nav ul li ul 
    { 
     display: none; 
     background-color: #F1F1F1; 
     z-index:1002; 
    } 

.nav ul li:hover 
    { 
    background-image: url(Images/Icons/nav-back.jpg); 
    } 

.nav ul li:hover ul 
    { 
    display: block; 
    position: absolute; 
    } 

.nav ul li:hover ul li 
    { 
    clear: left; 
    } 

.nav ul li ul li ul li 
    { 
    display: none; 
    background-color: #F1F1F1; 
    z-index:1002; 
    } 

.nav ul li ul li:hover ul li 
    { 
    display: block; 
    position: relative; 
    left:100%; 
    top:0;   
    }  

.nav a 
    { 
    color: #000000; 
    display:block;  
    } 

.nav a:hover 
    { 
    color: white; 
    }  

Answer 1

无需重写你的CSS变化：

.nav ul li ul li:hover ul li { 
    display: block; 
    position: relative; 
    left:100%; 
    top:0;   
} 

为：

.nav ul li ul li:hover ul { 
    display: block; 
    position: relative; 
    left:100%; 
    padding:0; 
    margin-top: -40px; 
} 
.nav ul li ul li:hover ul li { 
    display: block; 
} 

Answer 2

您需要添加top:0你的风格的嵌套的UI元素，让你的li元素position:relative。这将把ul移动到包含它的li的顶部。

你也可以通过使用直接子选择器来减少你的css代码。如果你让你的UI元素得到如下：

.nav ul li>ul {display:block} 

它只会将鼠标悬停在，没有进一步的菜单李后直接显示UL。

Answer 3

见this fiddle（第三个菜单项）。

您可以通过ammending这样的代码做到这一点：

.nav ul li ul 
{ 
    ... 
    height:0px; 
    ... 
} 

.nav ul li ul li:hover ul li 
{ 
    ... 
    top:-40px; 
    ... 
}