Question

我有一个子窗口菜单，将鼠标悬停在父菜单项上。所有功能都按预期执行，但应用于<li>的填充除了将内容推送到包含<ul>的边缘之外。

我玩浮动，清除和宽度设置，但没有一个提供了所需的结果。我最接近的是将float：left应用于<li>，width:100%。

但是，有了这个，就会发生一些令人费解的事情。有三个父项包含子菜单。父菜单是内联的，而子菜单是阻止的。

使用第三个子菜单，意味着相对于内联菜单显示在右侧最远的子菜单，上述样式不会生效。相反，它的外观保持原样，<li>超越了包含<ul>。完全奇怪。

看到正在运行的菜单

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

删除所有width: auto !important;
使用#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;
...
}

<li>悬停时重叠<ul> </ul> </li>

1 个答案: