Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to give a different color to a selected list item with CSS?

Tags:

html

css

I know this question has been asked so many times before. But I just can't find the right trick for my code. I want a different color for my active list item in the navigation bar. Obviously. Silly little thing. I know. But please try to help.

Here's my HTML code:

<div id="container">  
    <ul id="nav">  
        <li class="active"><a href="am_home.html">Home</a></li>  
        <li><a href="am_teachingassistants.php">Teaching Assistants</a></li>  
        <li><a href="am_courseinfo.php">Course Info</a></li>  
        <li><a href="am_timetable.php">Time Table</a></li>  
    </ul>  
</div>  

and Here's the CSS file:

#container {
    position: relative;
    top: -2em;
    z-index: 2;
    width: 1200px;
    margin: auto auto;
}

#nav {
   position: relative;
   float: left;
   margin-left: 400px;
}

#nav li {
    list-style: none;
    float: left;
    border-right: 1px solid #afc4cc;
}

#nav li a {
   position: relative;
   z-index: 2;
   float: left;
   padding: 5px 45px;
   font-size: 15px;
   font-weight: bold;
   font-family: helvetica, arial, sans-serif;
   text-decoration: none;
   color: #39aea8;
}

ul, li {
    margin: 0;
    padding: 0;
}

ul#nav li a:link,ul#nav li a:visited {
    color: #39aea8;
    text-decoration: none;
}

ul#nav li a:hover,ul#nav li a:active {
    color: #f4ba51;
    text-decoration: none;
}
like image 558
Cullen Avatar asked Oct 26 '12 11:10

Cullen


People also ask

How do I change the color of a selected object in CSS?

You can turn the element into a button. remove default styling from a button: online: none; border: none; background: none; then apply the usual button :focus or :active selectors.

How do you change the color of text in a list in CSS?

Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.

How do I change the color of an unordered list in CSS?

There are two ways to change the color of the bullet:Using an extra markup tag. Using Css style ::before selector.


1 Answers

There's something wrong with your CSS code. Just replace this:

 ul#nav li a:hover,ul#nav li a:active{    
}

with this:

 ul#nav li a:hover,ul#nav li.active a{
 // here styling 
}

and you are good to go. You just made a mistake while calling the active class in CSS.

like image 151
Rohit Azad Malik Avatar answered Oct 14 '22 04:10

Rohit Azad Malik