Question

I’m learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I’ve looked at several posts on this site and haven’t been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn’t work for me (I’ll assume it’s my fault).

Another source suggested using a span class which is what I’m currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that’s working for me is the bold text. You can see the work in progress here:

http://www.mentalwarddesign.net/dynamec/About/index.html

I’m assuming the class I’ve created in the span is being overridden, but I’m at a loss as to the remedy. Any and all help would be greatly appreciated.

Following is the code for the li and then the corresponding CSS. Thanks in advance!

<ul class="nav">
<span class="chosen"><li><a href="index.html" id="nav-whatwedo">What We Do</a></li></span>
<li><a href="howitstarted.html" id="nav-howitstarted">How It Started</a></li>
<li><a href="whoweare.html" id="nav-whoweare">Who We Are</a></li>
<li><a href="whatweknow.html" id="nav-whatweknow">What We Know</a></li>
</ul>

.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}

Answer 1

Ed, the CSS selector :active means “Being activated (e.g. by being clicked on)”, not “Having an href attribute that resolves to the URL of the current page”. You can use server-side logic to insert a class=”chosen” or similar. E.g:

<li class="chosen"><a href="index.html">What We Do</a></li>

And, CSS style: ul.nav li.chosen a { }

There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.