我一直在努力让我的导航菜单的悬停功能工作,但它只是不改变颜色,任何想法?导航菜单悬停不起作用
它的工作原理是,如果我没有为不同的列表项目设置单独的类,但我希望它们具有不同的颜色,但是在悬停时所有颜色都会变为相同的颜色。
#container .navigationContainer .navigation
{
float: right;
margin: 44px 0 0 0;
padding: 0;
}
#container .navigationContainer .navigation ul
{
list-style: none;
}
#container .navigationContainer .navigation li.home
{
margin: 0 0 0 26px;
padding: 12px 0 0 0;
width: 156px;
display: inline;
float: left;
font: normal .75em "Times New Roman", Times, serif;
color: #369ed1;
border-top: solid 2px #369ed1;
}
#container .navigationContainer .navigation li.home a,
#container .navigationContainer .navigation li.home a:link,
#container .navigationContainer .navigation li.home a:active,
#container .navigationContainer .navigation li.home a:visited
{
color: #369ed1;
text-decoration: none;
width: 156px;
}
#container .navigationContainer .navigation li.home a:hover
{
color: #373431;
border-top: solid 2px #373431;
}
#container .navigationContainer .navigation li.about
{
margin: 0 0 0 26px;
padding: 12px 0 0 0;
width: 156px;
display: inline;
float: left;
font: normal .75em "Times New Roman", Times, serif;
color: #a6bb54;
border-top: solid 2px #a6bb54;
}
#container .navigationContainer .navigation li.about a,
#container .navigationContainer .navigation li .about a:link,
#container .navigationContainer .navigation li .about a:active,
#container .navigationContainer .navigation li .about a:visited
{
color: #a6bb54;
text-decoration: none;
width: 156px;
}
#container .navigationContainer .navigation li .about a:hover
{
color: #373431;
border-top: solid 2px #373431;
}
#container .navigationContainer .navigation li.portfolio
{
margin: 0 0 0 26px;
padding: 12px 0 0 0;
width: 156px;
display: inline;
float: left;
font: normal .75em "Times New Roman", Times, serif;
color: #df3f89;
border-top: solid 2px #df3f89;
}
#container .navigationContainer .navigation li.portfolio a,
#container .navigationContainer .navigation li .portfolio a:link,
#container .navigationContainer .navigation li .portfolio a:active,
#container .navigationContainer .navigation li .portfolio a:visited
{
color: #df3f89;
text-decoration: none;
width: 156px;
}
#container .navigationContainer .navigation li .portfolio a:hover
{
color: #373431;
border-top: solid 2px #373431;
}
#container .navigationContainer .navigation .active
{
margin: 0 0 0 26px;
padding: 12px 0 0 0;
width: 156px;
display: inline;
float: left;
font: normal .75em "Times New Roman", Times, serif;
color: #373431;
border-top: solid 2px #373431;
}
#container .navigationContainer .navigation .active a,
#container .navigationContainer .navigation .active a:link,
#container .navigationContainer .navigation .active a:active,
#container .navigationContainer .navigation .active a:visited
{
color: #373431;
text-decoration: none;
编辑:
的html代码:
<div class="navigation">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li class="about"><a href="about.html">About</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
</ul>
</div>
你能提供你的HTML代码呢? – Bigood 2013-03-11 09:46:18
是的,张贴您的HTML代码 – Sowmya 2013-03-11 09:48:12
'li.portfolio'和'li .portfolio'(带空格)是两个不同的东西,并且您正在使用它们两个。女巫一个是对的? – Ricain 2013-03-11 09:58:14