html - 下拉菜单的问题

Question

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

这是一个 JS fiddle :

http://jsfiddle.net/HFMR5/

这是我的 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%;
}

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

至于显示在子菜单项上的悬停效果，您需要做的就是在您的选择器中更加具体。您使用的空格表示您将选择 #navigation 的后代，这是一个 li 元素。这包括子菜单。如果你使用像 > 这样的选择器，它表示一个直接的 child ，那么你将能够更具体地只定位顶级菜单项。 CSS 看起来像:

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

一个很好的 CSS 选择器引用:http://www.w3schools.com/cssref/css_selectors.asp