在CSS中添加活动状态到导航栏

http://jsfiddle.net/DaJWC/ 我无法弄清楚如何使其中一个链接反向，以便以蓝色开始。我也将如何做一个线下，你正在查看当前页面的意愿。在CSS中添加活动状态到导航栏

ul#list-nav { 
 
    list-style: none; 
 
    margin-left: 45px; 
 
    padding: 0; 
 
    width: 525px; 
 
} 
 
ul#list-nav li { 
 
    display: inline 
 
} 
 
ul#list-nav li a { 
 
    text-decoration: none; 
 
    text-transform: capitalize; 
 
    padding: 5px 0; 
 
    width: 100px; 
 
    background: ; 
 
    color: #333; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
ul#list-nav li a:hover { 
 
    background: ; 
 
    color: #09F 
 
}

<ul id="list-nav"> 
 
    <li><a href="index.html" class="active">Home</a> 
 
    </li> 
 
    <li><a href="#" class="border_left">About Us</a> 
 
    </li> 
 
    <li><a href="#" class="border_left">Portfolio</a> 
 
    </li> 
 
    <li><a href="#" class="border_left">Get a Quote</a> 
 
    </li> 
 
    <li><a href="#" class="border_left">Contact</a> 
 
    </li> 
 

 
</ul>

来源

2012-06-29 arranb

这看起来很直截了当。你有什么尝试，但没有为你制定的？另外，你的选择器非常具体。对于你想要达到的目标可能会过度杀伤。 – MetalFrog

添加一个类到我想要选择的项目，把它放到蓝色，但它没有工作 – arranb

您需要删除：从你设置的颜色 “悬停”。我会创建一个新的选择器，如：ul＃list-nav li a {...}，然后你可以选择颜色不悬停和悬停。 look at this。

来源

2012-06-29 16:22:41 dezman

你可以js小提琴请 – arranb

检查它！我将ul＃list-nav li a中的颜色设置为＃09F。在我原来的帖子中有一个链接。 – dezman

现在他们都是蓝色 – arranb

在CSS中添加活动状态到导航栏

回答

相关问题