CODEWITHSUNDEEP
css
Sami Al-Subhi
Sami Al-Subhi

Reputation: 4672

CSS issue: multiple CSS with the same element

<div id="nav">
    <ul id="rightMin">
        <li id="selectedmenu" onclick="location.href='index.php'">main</li>
        <li onclick="location.href='aboutus.php'">about</li>
        <li><a href="#">contact us</a></li>
    </ul>
</div>

CSS:

#selectedmenu {
    display:inline;
    float:right;
    /*padding: 2px 7px 0px 7px;*/
    height: 35px;
    background: url('../images/selected.png') repeat-x;
    cursor: pointer;
    text-align: center;
    line-height:35px;
    padding: 0 5px 0 5px;
    color: white;
}
div#nav ul li {
    display:inline;
    float:right;
    /*padding: 2px 7px 0px 7px;*/
    height: 35px;
    cursor: pointer;
    text-align: center;
    line-height:35px;
    padding: 0 5px 0 5px;
}

div#nav ul li:hover {
    background: #232323;
    color:#fff;
}

The element with the ID selectedmenu takes CSS #selectedmenu but when hovering it takes div#nav ul li:hover. how can i make it sticks with #selectedmenu

Upvotes: 0

Views: 60

Answers (3)

bunsiChi
bunsiChi

Reputation: 125

just change it every time you hover it, try this:

div#nav ul li #selectedmenu:hover{ /* the style for #selectedmenu*/ }

hope this helps..

Upvotes: 0

Shadow_boi
Shadow_boi

Reputation: 2198

div#nav ul li#selectedmenu:hover {
    add your css rules here...
}

Upvotes: 1

John Conde
John Conde

Reputation: 219814

Give selectedmenu a higher precedence:

div#nav ul li#selectedmenu {
     ...
}

Upvotes: 0

Related Questions