用css菜单正确显示第三层子菜单

Question

我正在开发一个新的网站，并且遇到了css菜单的问题。这是比较容易通过例子来解释：这是网站的链接：http://www.webau.net/CSFF/index.asp

在“首页”父菜单项，我有以下配置：

Top level menu (parent) 
    Submenu 1 (child 1) 
     Submenu 2 (grandchild 1) 
    Submenu 3 (child 2) 
    Submenu 4 (child 3) 

相反，它看起来像在页面上这其中，孙子1看起来像它需要孩子2菜单的地方：

Top level menu (parent) 
    Submenu 1 (child 1) 
    Submenu 2 (grandchild 1) 
    Submenu 4 (child 3) 

我可以看到菜单2上市的轻微偏移..这让我觉得这是显示孙子的尝试不当。

所以我假设我有两个问题..

首先是，第三层菜单（孙子子菜单2）同时第二层菜单（子子菜单1，3，4）显示器，显示当你将鼠标悬停在父菜单项上时。

其次是，由于某种原因，孙子子2项正在取代（ontop的铺设）的子子菜单3.

我认为，当我纠正孙子子菜单的显示问题，有两种将其固定。

有人可以帮我弄清楚如何添加新的css代码来处理第三层或多层菜单..所以他们被隐藏，直到他们自己的父母被徘徊，然后显示在父母的右边子菜单栏？

再次感谢您的帮助。 SunnyOz

为了您的方便： HTML代码：

<div id="navcontainer"> 
    <div id="navsection"> 
     <ul> 
      <li id="navactive"><a class="current" href="#">Home</a> 
       <ul> 
        <li><a href="#">submenu 1</a> 
         <ul> 
          <li><a href="#">submenu 2</a></li> 
         </ul> 
        </li> 
        <li><a href="#">submenu 3</a></li> 
        <li><a href="#">submenu 4</a></li> 
       </ul> 
      </li> 
      <li><... rest of menu items not needed for example> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS代码：

#navcontainer 
{ 
    width: 711px; 
    height: 25px; 
    text-align: center; 
    margin: 0px auto; /*Center container on page*/ 
    clear: both; 
    background-color: #129F9F; 
    border: 3px solid #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px; 
    -ms-border-radius: 5px; 
    border-radius: 5px; 

    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%); 

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%); 

    /* Opera */ 
    background-image: -o-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%); 

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16ACAC), color-stop(1, #0D6F6F)); 

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%); 

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #16ACAC 0%, #0D6F6F 100%); 
} 
#navsection 
{ 
    height: 24px; 
    line-height: 24px; 
    font-size: 12px; 
    position: relative; 
} 
#navsection ul 
{ 
    padding: 0px 0px 0px 35px; /* padding on left to get nav menu to center.. since it has a float left to make it display properly*/ 
    list-style: none; 
} 
#navsection ul li 
{ 
    padding: 0; 
    margin: 0; 
    border-right: 2px solid #129F9F; 
    float: left; 
} 
#navsection ul li.navcontact /* to stop right border at end of nav line */ 
{ 
    padding: 0; 
    margin: 0; 
    border-right: none; 
    float: left; 
} 
#navsection ul li a 
{ 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
    padding: 0 15px; 
} 
#navsection > ul > li > a:hover, #navsection > ul > li:hover > a 
{ 
    text-decoration: none; 
    color: #EAA339; 
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC)); 

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%); 
} 

#navsection > ul > li > a.current:hover, #navactive a.current:link, #navactive a:visited, #navactive > ul li a:hover, #navsection a:hover 
{ 
    text-decoration: none; 
    color: #EAA339; 
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* Opera */ 
    background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC)); 

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%); 

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%); 
} 

#navsection ul li ul 
{ 
    display: none; 
    width: auto; 
    position: absolute; 
    padding: 0px; 
    margin: 0px; 
} 
#navsection ul li:hover ul 
{ 
    display: block; 
    position: absolute; 
    margin: 0; 
    padding: 0; 
} 
#navsection ul li:hover li 
{ 
    float: none; 
    list-style: none; 
    margin: 0px; 
} 
#navsection ul li:hover li 
{ 
    font-size: 12px; 
    height: 24px; 
    background: #54C4C4; 
    border: 1px solid #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px; 
    -ms-border-radius: 5px; 
    border-radius: 5px; 
} 
#navsection ul li:hover li a 
{ 
    font-size: 11px; 
    color: #fff; 
    padding: 0px; 
    display: block; 
    width: 150px; 
} 
#navsection ul li li a:hover 
{ 
    font-size: 11px; 
    height: 24px; 
    color:#EAA339; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px; 
    -ms-border-radius: 5px; 
    border-radius: 5px; 
} 

Answer 1

这里有3个问题。

1. 您显示存在以下徘徊<li/>所有<ul/>元素。 更改#navsection ul li:hover ul到#navsection ul li:hover > ul选择直接子只

2. 您正在设置每个drop level的位置是相同的。 尝试添加诸如#navsection ul ul ul { top: 1em; left: 140px; }之类的东西，这将阻止孙子遮住孩子。

3. 你是title属性会对您的导航产生负面影响。 我会完全删除它们，因为它们不会向链接和添加任何实际有益信息，从而掩盖导致难以使用导航的菜单项。

我希望帮助:)