Question

我正在使用有序列表创建一个菜单，我遇到了两个问题，下拉列表没有对齐，悬停效果应用于下拉列表，我不希望发生这种情况

这是一个JS小提琴：

这是我的HTML代码：

<div id="menu">
    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
          <li><a href="">Services</a>
            <ul>
            <li><a href="">Residential</a></li>
            <li><a href="">Buisiness</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
    </ul>
    </div>

这是菜单的CSS：

/*Navigation CSS*/

                #navigation 
                {
                width: 100%;
                float: left;
                margin: 0 0 3em 0;
                padding: 0;
                list-style: none;
                background-color: #f2f2f2;
                border-bottom: 1px solid #ccc; 
                border-top: 1px solid #ccc; 
                box-shadow: 0 8px 6px -6px black;
                }
                #navigation li 
                {
                float: left;
                }
                #navigation li a 
                {
                display: block;
                padding: 8px 15px;
                text-decoration: none;
                font-weight: bold;
                color: #FF6987;
                border-right: 1px solid #ccc; 
                -webkit-transition: all 0.1s ease-in;
                -moz-transition: all 0.1s ease-in;
                -o-transition: all 0.1s ease-in;
                }

                #navigation ul
                {
                font-family: Arial, Verdana;
                font-size: 14px;
                margin: 0;
                padding: 0;
                list-style: none;
                }

                #navigation ul li {
                display: block;
                position: relative;
                float: left;
                }

                #navigation li ul { display: none; }

                #navigation li:hover ul {
                display: block;
                position: absolute;
                }

                #navigation li:hover li {
                float: none;
                font-size: 11px;
                }

                #navigation li:hover a { background: #f2f2f2; }

                #navigation li a:hover 
                {
                color: #FF6987;
                background-color: #f2f2f2; 
                box-shadow: inset 0 8px 6px -6px black;
                }

Answer 1

为了使宽度相同，你需要实际设置子菜单的宽度（不一定是静态的），但如果你让它成为那么它只会扩展到接头的大小，显然不是'如果需要，CSS更改看起来像：

#navigation li{
    float: left;
    position:relative;
}

#navigation li:hover ul {
    display: block;
    position: absolute;
    width: 100%;
}

在确定100％宽度而不是body标签时，position: relative知道子菜单使用该元素。

至于显示在子菜单项上的悬停效果，您需要做的就是在选择器中更具体。您使用的空间表示您将选择#navigation li元素作为>元素的后代。这包括子菜单。如果您使用#navigation > li > a:hover{ color: #FF6987; background-color: #f2f2f2; box-shadow: inset 0 8px 6px -6px black; }之类的选择器来表示直接的孩子，那么您将能够更加具体地定位顶级菜单项。 CSS看起来像：

{{1}}

CSS选择器的一个很好的参考：http://www.w3schools.com/cssref/css_selectors.asp

下拉菜单的问题

1 个答案: