<li> 重叠 <ul> 悬停

Question

我有一个子导航菜单，它出现在父菜单项上。所有功能都符合预期，除了应用于<li> 的填充将内容推到包含<ul> 的边缘之外。

我玩过浮动、清除和宽度设置，但都没有达到预期的效果。我最接近的是将float：left应用于<li>，width:100%。

然而，发生了一些莫名其妙的事情。三个父项包括子菜单。父菜单是内联的，而子菜单是块状的。

对于第三个子菜单，即相对于内联菜单显示在最右侧的子菜单，上述样式不会生效。相反，它的外观保持不变，<li> 超越了包含的<ul>。太奇怪了。

代码如下——您可以在revo.wesleypicote.com看到正在运行的菜单

HTML

<ul class="mainNavContainer clearfix">

    <li class="mainNavRows navParents active current">

        <a href="page/">Page</a>

    <ul class="subNavContainer">

        <li class="subNavRows"><a href="subPage 1">subPage 1</a></li>

        <li class="subNavRows"><a href="subPage 2">subPage 2</a></li>...

    </ul>

    </li>

</ul>

样式

/* styles for mobile menu */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }


.mainNavContainer {
        margin: 0;
        padding: 0;
    position: relative;
    z-index: 3000;
        display: inline-block;
        border-top: dotted 1px #E6E6E6;
        border-bottom: dotted 1px #E6E6E6;
    }

/* make the dropdown ul invisible */

#mainNav ul li ul.subNavContainer {
    display: none;
    }

/* make the sub menu ul visible and position it beneath the main menu list item */

#mainNav ul li:hover ul.subNavContainer {
    display:block !important;
    white-space: nowrap;
    position: absolute;
    width: auto !important;
    top:32px;
    background-image:none;
    text-align:left;
    padding:0 0 2% 0;
    }

#mainNav ul li ul.subNavContainer {
    width: auto !important;
    }

/* style the background and foreground color of the submenu links */

#mainNav .subNavContainer {
    position:relative;
    z-index:1000;
    background-color:#FFF; 
        color:#A8A8A8;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
        moz-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
        moz-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
    }

#mainNav ul li ul.subNavContainer li.subNavRows {
    display:block;
    float: none;
    position: relative;
    width:auto !important;
    margin:0;
    padding:2% 0;
        background-image:none;
    border-bottom: dotted 1px #E6E6E6;
    }

#mainNav ul.subNavContainer li.subNavRows:hover {
    background-color:#f5f5f5;
    }

#mainNav ul.subNavContainer li.subNavRows a {
    display:block;
    margin: 0;
    padding: 5%;
    font-size:.85em;
    color:#A8A8A8;
    }

Answer 1

1. 删除每个出现的width: auto !important;
2. 使用#mainNav > ul 而不是#mainNav ul（这意味着您的css 将仅适用于第一次出现的ul，在#mainNav 下，使用它是一个好习惯，因为主导航样式可能会影响subnav 否则）

对于具有将拉伸主manu元素宽度的子菜单使用

#mainNav ul li {
   position:relative;
   ...
}

#mainNav .subNavContainer {
   position: absolute;
   left: 0;
   right: 10px;
   min-width: 100px;
...
}