二级下拉导航

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

您需要在样式中为嵌套的ul元素添加top:0，并制作li元素position:relative。这会将ul移动到包含它的li的顶部。

您还可以使用直接子选择器来减少css代码。如果你使你的ul元素得到以下结果：

.nav ul li>ul {display:block}

只会在你悬停的情况下直接显示ul，而不是其他菜单。

Answer 3

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

你可以通过修改这样的代码来实现：

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

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