Question

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

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

第二个问题，是我给我的dropDownMenu li ul li边框底部，但这个边框不占据我的li ul li元素的整个宽度。你可以在我的小提琴中看到。

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

我拥有的是http://jsfiddle.net/jcak/Lmc4mj2u/3/

在此图片中，您可以看到我的两个问题，首先是我的灰色背景占据整个菜单高度。第二个是“Html”，“CSS”和“JS”，我的边框底部并没有占据整个宽度。

enter image description here

这是我的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期 区分链接/元素及其包含的元素，因此li的悬停状态应仅影响其中元素的背景颜色。

如果想要链接在整个高度上，则需要在a元素中添加span这样的元素，使a元素跨越整个高度，并指定悬停状态以更改该span的背景颜色。 / p>

第2期 你需要盒子大小：边框。否则，border属性将忽略元素的填充部分。

更新小提琴：http://jsfiddle.net/taruckus/Lmc4mj2u/10/

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

试图只是悬停菜单项而不是菜单的整个高度和我的边框底部不占用整个宽度

1 个答案: