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

所以即时通讯只是试图做一个简单的导航栏菜单，其下面有一个4px的边框，当你将鼠标悬停在它上面时。这本身并不难，但我试图设计它，以便不同的菜单元素具有不同的颜色。这是我到目前为止有：简单的导航栏在CSS问题，可能是一个非常简单的答案

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边境工作... :(

来源

2013-02-28 BoneStarr

这真的很简单，你在CSS中有两个声明：

#navlist li .portfolio a:hover {

.portfolio是a元素。您使用的声明意味着：a这是.portfolio的子项，它是li的子项，它是#navlist的子项。你太深了。

这将工作：

#navlist li a.portfolio:hover {

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

完全纠正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: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; 
}

来源

2013-02-28 23:49:56

LOL现在感觉有点不舒服......但是谢谢......晚上太晚了：D – BoneStarr 2013-02-28 23:52:31

需要更多的咖啡;）如果你已经很难找到它，工作时间太长。接受，如果它解决了你的问题puh-lease;） – 2013-02-28 23:53:18

你有你的选择错误

#navlist li .about应以#navlist li a.about为例

来源

2013-02-28 23:55:45

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

回答

相关问题