How to make a css navigation menu “selected” option still clickable


Tags: css,inheritance,hover

Problem :

So I have a fairly simple vertical CSS menu based off of UL.

<ul class="vertnav">
<li><a href="unselected1.php">Item1</a></li>
<li><a href="unselected2.php">Item2</a></li>
<li><a href="selected.php" class="vertnavdown">Selected</a></li>
</ul>

I want three basic colors (say tan for default LI, orange for VERTNAVDOWN, and red for A:HOVER. However I can't seem to get the vertnavdown class to inherit right, and the .vertnav li a:visited overrides it every time. if I use !important to force it through I can't seem to also get the hover to work.

Any suggestions? I thought I understood inheritance in CSS but I guess I don't.

.vertnav{
list-style: none;
margin: 0px;
width: 172px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
height: 45px;
}
.vertnav li{
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom: 0px none;
border-right: 0px none;
border-top: 1px solid #fff;
border-left: 0px none;
text-align: left;
height: 45px;
width: 172px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.vertnav li a{
display: block;
text-align: left;   
color: #666666;
font-weight: bold;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:visited{
display: block;
text-align: left;   
color: #666666;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:hover{
color: white;
background-color: #ffbf0c;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 45px;
text-decoration: none;
font-weight: bold;
}
.vertnavdown a
{
display:block;
color: #FFF;
background-color: #ff9000;
}
.vertnavdown a:hover
{
background-color: #ffbf0c;
}

^^^^^^^^^^^^^ Edited to add CSS. ^^^^^^



Solution :

It would help if you could post the css as well.

What you normally need is something like this

<ul id="nav">
<li><a>one</a></li>
<li class="active"><a>two</a></li>
</ul>

the css would be:

#nav li{
color: red;
}
#nav li a:visited{
color: green;
}
#nav li.active a{
color: blue;
}

you need to be more specific with the active css naming.


    CSS Howto..

    how to arrange div without disturbing the page design

    how to create a vertical menu in html/css [closed]

    how do I modify a :hover style using JavaScript / jQuery?

    How to change colour of Bootstrap scroll spy and why won't my logos resize?

    CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to set auto width for the fixed child div, when parent div change width?

    How to get rid of spaces with CSS

    (HTML/CSS) How to align a text to middle of center (in both x and y axis)? [duplicate]

    How to set element in css at fixed position

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How to uniformly darken colors?

    How to center an image, make it act as an link and have an mouseover command?

    How to calculate sine, cosine in Less?

    How do you group similar n-th child selectors? [duplicate]

    Show Pinterest hover buttons only on images with specified class

    How to manage CSS files on design A/B test

    How can I apply jQuery .css style to descendant div [closed]

    How to avoid IE11 “slow” evaluation of CSS :invalid and :valid pseudo selectors

    How to make round corners to both inside of a box and its border?

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    CSS flexbox: How to get column items to fill height

    How to use vertical menus in HTML and css?

    How to make a css compatible by all browser

    how to define css to get the simple tabbed menu

    How to recreate eBay New Logo Page in HTML + CSS

    How to mask semi circles inside a rectangle and mask through css?

    Entire window becomes blur after a modal is shown jQuery why?

    How to change the scroll-bar style in css [duplicate]