Child Element not overriding Parent

HTML & CSS
1

Please help…

I am working on a navigation menu. Here is a link to my sandbox where I am building the page.

Here’s a snippet of the code that builds the nav bar…

<!-- Home Page -->
<li <?php if ($currentPage == 'index.php') {echo 'class="currentnav"';} ?>>
<a href="<?php echo $absolutePath ?>/index.php">home</a></li>

I’ve inserted the "class=“currentnav” for a you are here designation.

Here is the css for the nav bar

#nav    {
    background:#b2c5ce;
    width:990px;
    height:26px;
    border: 1px solid #000;
}

#menu ul {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:.8em;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index:1000;
}

#menu ul li {
    display: block;
    position: relative;
    float: left;
}

#menu li ul {
    display: none; 
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-weight:600;
    color: #000;
    padding: 6px 20px 4px 20px;
    background:#b2c5ce;
    white-space: nowrap;
}

#menu ul li a:hover {
    background:#737373;
    color:#fff;
}

#menu li:hover ul {
    display: block;
    position: absolute;    
}

#menu li:hover li {
    float: none;
    font-size: 12px;
    border-top: 1px solid #000;
}

#menu li:hover a { 
    background: #b2c5ce;
    color:#fff;
}

#menu li:hover li a:hover { 
    background: #737373;     
}

.vertLine {
    display: inline;
    background-color:#737373;
    width: 1px;
    height: 100%;
    margin-top:6px;
}

.currentnav    {
    color:#D40000;
    background:#0F0;
    width:300px;
}

The currentnav class is displaying the width property, but not the color or background properties. Can someone please tell me where I am going wrong?

Thanks!

Paul McRae

2

“#menu ul li a” has higher priority than “.currentnav”, so color from .currentnav is ignored.

You should change it to “#menu ul li.currentnav” for background color and “#menu ul li.currentnav a” for font color.