Need help with html/css menu

[hoops]

I have a menu that looks like this:

<div id="nav">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">FAQsr</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div>

The default menu is Grey and when I hover over each one it turns blue. I want at least the "Home" to be selected (active) with the blue by default, or even better, I would like each page the user is on to default to the blue color so the user knows what page he is on.

Here is my CSS code (the nav-hover.jpg) is the blue color that I want:

#nav {
height: 31px;
margin-right: 0px;
margin-left: 0px;
color: #FFFFFF;
background-color: #CCCCCC;
background-image: url(images/nav-bg.jpg);
background-repeat: repeat-x;
background-position: top;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-weight: bold;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 20px;
padding-left: 20px;
text-align: center;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 31px;
background-image: url(images/nav-border.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#nav ul li a:hover {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
color: #FFFFFF;
}
#nav ul li#active {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
}
#nav ul li#active a {
color: #FFFFFF;
}


Any help would be appreciated.

 

[smghost001]

Hi there,

All you need to do is add id="active" to the item you want selected on each page.

For example on the home page have your menu as:

<div id="nav">
<ul>
<li> <a id="active" href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">FAQsr</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div>

on your FAQsr page you would have:

<div id="nav">
<ul>
<li> <a href="#">Home</a> </li>
<li> <a href="#">About</a> </li>
<li> <a id="active" href="#">FAQsr</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div>

etc

Make sure your CSS attributes for

#nav ul li#active {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
}
#nav ul li#active a {
color: #FFFFFF;
}

are correct though.

 

[hoops]

I made the changes to the menu, but I don't know what changes to make to the CSS file.

Please help.

Thanks!