1

嗨，我不知道如何更改 CSS 菜单的子项的大小（父项有图像背景，子项应该有背景颜色）。我试过类似的东西：

ul > li > a:hover {
    display:inline-block;
    background:#000;
    float:left;
    width:120px;
    height:25px;
}

但它都与其他元素混合在一起。你能帮我弄清楚吗？

HTML：

   <div id="menu">
   <ul>
    <li><a id="menu1" href="#">Parent1</a></li>

    <li><a href="#">Parent2</a>
        <ul>
            <li><a href="#">Child1</a></li>
            <li><a href="#">Child2</a></li>
            <li><a href="#">Child3</a></li>
        </ul>
    </li>
    <li><a href="#">Parent3</a></li>
    <li><a href="#">Parent4</a></li>
    <li><a href="#">Parent5</a></li>
   </ul>
   </div>

CSS：

#menu {
    position:absolute;
    top:133px;
    left:0px;
    width:900px;
    height:50px;
}
ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    /*padding: 5px 15px 5px 15px;*/
    background-image: url(../images/menu1.png);
    white-space: nowrap;
    width:178px;
    height:50px;
}
ul li a:hover { 
    background: #BBBBBB;
}
li:hover ul {
    display: block;
    position: absolute;
    left:0px;
}
li:hover li {
    float: left;
    font-size: 11px;
}
li:hover a { 
    background: #3b3b3b; 
}
li:hover li a:hover {
    background: #CCC;
}

非常感谢您提前提供的帮助！

4

5 回答 5

2

为您的子菜单添加背景颜色：

ul li ul li {
    // rules
}

您还可以将类添加到列表项中以使其更易于管理。例如，您可以向子菜单的 ul 添加一个类：

<li><a href="#">Parent2</a>
        <ul class="sub-menu">
            <li><a href="#">Child1</a></li>
            <li><a href="#">Child2</a></li>
            <li><a href="#">Child3</a></li>
        </ul>
    </li>

然后您可以将 css 简化为：

.sub-menu li {
    display:inline-block;
    background:#000;
    float:left;
    width:120px;
    height:25px;
}
于 2013-07-04T11:37:36.527 回答
2

希望以下更改对您有用。这是小提琴链接。以下是您的 css chagnes

#menu {
    /*position:absolute;
    top:0;
    left:0px;*/
    width:900px;
    height:22px;
    background-color:#000;
}
ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    line-height:22px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align:center;
}
ul li {
    display: block;
    float: left;
    position:relative;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    /*padding: 5px 15px 5px 15px;*/
    background-image: url(../images/menu1.png);
    white-space: nowrap;
    width:178px;
    line-height:22px;
}
ul li:hover a { 
    background: #BBBBBB;
}
ul li ul {
    display: none;
    widht:200px;
    position:absolute;
    left:0;
    top:22px;
}
ul li ul li {
    float: none;
    font-size: 11px;
}
ul li ul li a {
  background: #3b3b3b;
    background-image:none!important;
}
ul li ul li a:hover {
    background: #CCC;
}
ul li:hover ul {
    display: block;
    position: absolute;
    left:0px;
}
于 2013-07-04T12:08:57.037 回答
0

保持相同的宽度是很好的，这样你就可以避免那种奇怪的运动。

尝试这个

ul li ul li a:hover {
    display:block;
    background:#000;
    float:left;
    width:178px;
    height:25px;
}

演示

于 2013-07-04T11:39:23.577 回答
0

我不知道你希望结果看起来如何，但你也可以在你的 css 中使用 + 选择器，如下所示：

ul > li > a:hover+ {
        display:inline-block;
        background:#000;
        float:left;
        width:120px;
        height:25px;
    }

您在 a:hover 之后看到的 + 选择器意味着将选择直接在 a:hover-tag 之后的下一个元素，在这种情况下它将是 ul

如果您希望 ul 是一个列表而不是像这样的平面列表，您还可以使用 +ul 指定元素：

ul > li > a:hover+ul {
        display:inline-block;
        background:#000;
        float:left;
        width:120px;
        height:25px;
    }

像这样你知道你只会影响悬停的元素旁边的元素

于 2013-07-04T11:43:43.003 回答
0

解决方案

ul > li:hover > li > a {
    display:inline-block;
    background:#000;
    float:left;
    width:120px;
    height:25px;

}

可以根据要求

ul > li:hover  li   a {  }
于 2013-07-04T12:24:47.890 回答