html - 试图只悬停菜单项而不是菜单的整个高度，我的边框底部没有占据整个宽度

Question

我正在做一个带有子菜单的菜单，但我有两个我不知道如何解决的问题。

第一个问题 是，当我悬停我的菜单项时，我希望灰色背景悬停在我的菜单项上，但我不希望这个背景占据整个菜单高度。我只想要菜单链接上方的背景。

第二个问题，我给了我的 dropDownMenu li ul li 一个边框底部，但是这个边框没有占据我的 li ul li 元素的整个宽度.正如您在我的 fiddle 中看到的那样。

.dropDownMenu li ul li {
    width: 305px;
    border-bottom:4px solid red;
}

这里有我所拥有的:http://jsfiddle.net/jcak/Lmc4mj2u/3/

在这张图片中你可以看到我的两个问题，首先我的灰色背景占据了整个菜单高度。其次是“Html”、“CSS”和“JS”，我的边框底部没有占据整个宽度。

这是我的 html:

<section id="menu-container">   
    <nav id="menu">
        <ul class="dropDownMenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design</a>
                <ul>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JS</a></li>
                </ul>
            </li>
            <li><a href="#">Programming</a>
                <ul>
                    <li><a href="#">FLEX</a></li>   
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">jQuery</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</section>

还有我的CSS:

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}
#menu-container
{
    width:100%;
    height:62px;
    float:left;
    background:#4f4383;
    z-index:7;
    float:left;
    border-bottom: 3px solid #ccc;
}

#menu
{
    width:960px;
    height:auto;
    margin:0 auto 0 auto;
}

.dropDownMenu li ul li ul {
    list-style: none;
}


.dropDownMenu a {
    line-height: 62px;
    padding: 0 20px;
    float: left;
    font-size:17px;
    font-weight:bold;
    text-decoration: none;
    color: #ccc;
}
.dropDownMenu a:hover {
    background-color:#ccc;height:62px; color:#2F3083; line-height:62px;border-radius:7px; 
}
.dropDownMenu li {
    float: left;
    display: block;
    list-style: none;
    position: relative;
}


.dropDownMenu li ul {
    width: 200px;
    position: absolute;
    list-style: none;
    display: none;
    margin: 0;
    left: -10px;
    z-index: 999;

}
.dropDownMenu li:hover ul {
    display: block;
    margin-top: 62px;
    margin-left: 10px;

}
.dropDownMenu li ul li {
    width: 305px;
    border-bottom:4px solid red;
}
.dropDownMenu li ul li a {
    color: #ccc;
    display: block;
    margin: 0 !important;
    width: 100%;
    background: #4f4383;
    border-right:3px solid #ccc;
    border-left:3px solid #ccc;
}



.dropDownMenu li ul li ul {
    position: absolute;
    display: none !important;
    left: 240px;
    top: -30px;
    z-index: 999;
}
.dropDownMenu li ul li:hover ul {
    display: block !important;
    margin: 30px 0 0 0;
}
.dropDownMenu li ul li ul li {
    float: left;
    width: 305px;
    display: block;
}
.dropDownMenu li ul li ul li a {
    display: block;
    margin: 0 !important;
    width: 100%;
    background: #4f4383;
    border-right:3px solid #ccc;
    border-left:3px solid #ccc;
    border-right:3px solid #ccc;
    border-top:3px solid #ccc;
}

Answer 1

问题 1区分 link/a 元素及其包含的 li，因此 li 的悬停状态应该只影响其中 a 元素的背景颜色。

如果你想要整个高度的链接，你需要在 a 元素中添加一个像 span 这样的元素，让 a 元素跨越整个高度，并指定悬停状态来改变那个 span 的背景颜色。

第 2 期你需要 box-sizing:border-box。否则，border 属性会忽略元素的填充部分。

更新的 fiddle :http://jsfiddle.net/taruckus/Lmc4mj2u/10/

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
    box-sizing:border-box;
}