Question

所以我只想尝试制作一个简单的导航栏菜单，当你将鼠标悬停在它上面时，该菜单下面有一个4px的边框。这本身并不难，但我试图设计它，以便不同的菜单元素有不同的颜色。这就是我到目前为止所做的：

HTML

    <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About</a></li>
<li><a href="#" class="portfolio">Portfolio</a></li>

</ul>
</div>

CSS

/*Menu*/

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#navlist a:hover { color: #000; }

#navlist  li .home {
color: #d43f3f;
}

#navlist li .home a:hover
{
border-bottom: 4px solid #d43f3f;
padding-bottom: 2px;
background: transparent;
color: #d43f3f;
}
#navlist li .about {
color: #00ace9;
}

#navlist  li .about a:hover
{
border-bottom: 4px solid #00ace9;
padding-bottom: 2px;
background: transparent;
color: #00ace9;
}
#navlist li .portfolio {
color: #6a9a19;
}

#navlist li .portfolio a:hover
{
border-bottom: 4px solid #6a9a19;
padding-bottom: 2px;
background: transparent;
color: #6a9a19;
}

它显示了不同的颜色，但悬停功能不适用于我的4px边框...... :(

Answer 1

这很简单。你的CSS中有两个声明。

#navlist li .portfolio a:hover {

.portfolio是a元素。您使用的声明暗示：a是.portfolio的孩子，li的孩子是#navlist的孩子，是#navlist li a.portfolio:hover {的孩子。你走得太深了。

这将有效：

/*Menu*/ #navlist { margin: 0; padding: 0 0 20px 10px; } #navlist ul, #navlist li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navlist a:link, #navlist a:visited { float: left; line-height: 14px; font-weight: bold; margin: 0 10px 4px 10px; text-decoration: none; color: #999; } #navlist a:hover { color: #000; } #navlist li .home { color: #d43f3f; } #navlist li .home:hover { border-bottom: 4px solid #d43f3f; padding-bottom: 2px; background: transparent; color: #d43f3f; } #navlist li .about { color: #00ace9; } #navlist li .about:hover { border-bottom: 4px solid #00ace9; padding-bottom: 2px; background: transparent; color: #00ace9; } #navlist li .portfolio { color: #6a9a19; } #navlist li a.portfolio:hover { border-bottom: 4px solid #6a9a19; padding-bottom: 2px; background: transparent; color: #6a9a19; }

工作小提琴：http://jsfiddle.net/jnbBz/1/

完全纠正的CSS：

{{1}}

Answer 2

您的选择器错误

#navlist li .about应为#navlist li a.about，例如

简单的导航栏在css问题，可能是一个非常简单的答案

2 个答案: