I Need CSS Menu Help?

I've got a CSS menu that i'm tweaking to my own tastes, but I need a bit of help with the finishing touches. Basically, I want the current or active menu item to be highlighted in a specific colour but i'm not sure how. Would really appreciate it if someone could help me out.

CSS:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5%;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#ffffff;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#ffffff;

color:#6d6d6d;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #0099ff;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#6d6d6d;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#6d6d6d;

border:0px;

color:#0099ff;

text-decoration:none;

}

.menu p{

clear:left;

}

Menu HTML:

<div class="menu">

<ul>

<li><a href="#" >Menu Item 1</a></li>

<li><a href="#" id="current">Menu Item 2</a>

<ul>

<li><a href="#">Sub Menu A</a></li>

<li><a href="#">Sub Menu B</a></li>

<li><a href="#">Sub Menu C</a></li>

<li><a href="#">Sub Menu D</a></li>

</ul>

</li>

<li><a href="#">Menu Item 3</a>

<ul>

<li><a href="#">Sub Menu A</a></li>

<li><a href="#">Sub Menu B</a></li>

<li><a href="#">Sub Menu C</a></li>

<li><a href="#">Sub Menu D</a></li>

</ul>

</li>

<li><a href="#">Menu Item 4</a></li>

</ul>

</div>

Thanks.

3 Answers

Relevance
Still have questions? Get your answers by asking now.