Menu Color & Menu Issues

Question

So I've got two issues. One is that, I may hover over "About" when I'm on "Home", which gives About it's white color like it should but Home returns to the default gray color, which it shouldn't. I want the menu item I'm hovering over to be of white text with a gray box around it while the page I am currently on (Home) only lights up in white in the text, with no box around. Also, when I move the mouse away (not hovering over any menu item), the white color stays on whichever item I hovered over last. I want the text on the current page I'm on (Home) to be white.

Another issue I noticed is that, when I move to the About tab, the "dimensions" (padding?) is different with the Home & About buttons than if I'm on the Home tab. Since it's in the css file it should be for all pages, right?

I'm doing a website for my Webdesign class and I'm quite new with this but have managed to almost recreate the Lamborghini website without copy+paste. You'll see there what I mean with the menu system, I want it to look the same (hover over menu item will make the font white and a gray box around it while the current menu item stays white in color (text) with no box). Basically the same kind of drop-down menu as on the Lamborghini Homepage (where you over a menu item and the sub-menus drops down like that).

Code (Menu) Css:

#dolphincontainer{
    position:relative; 
    color:#E0E0E0;
    background:#000000;
    padding-top:40px;
    width:100%;
    font-family:Helvetica,Arial,Verdana,sans-serif;
}
#dolphinnav {
    position:relative;
    font-size:16px;
    text-transform:uppercase;
    font-weight:bold;
    background:#000000 url(images/dolphin_bg.gif) repeat-x bottom left;
    padding:0 0 0 60px;
}
#dolphinnav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    float:left;
}
#dolphinnav ul li {
    display:block;
    float:left;
    margin:0 1px;
}
#dolphinnav ul li a{
    display:block;
    float:left;
    color:#3D3D3D;
    text-decoration:none;
    padding:0 10 0 20px;
    height:10px;
}
#dolphinnav ul li a span {
    padding:12px 20px 0 0;
    height:21px;
    float:left;
}
#dolphinnav ul li a:hover {
    background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span {
    display:block;
    width:auto;
    cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
    color:#fff;
    background:#000000 url(images/dolphin_left-ON.gif) no-repeat top left;
    line-height:275%;
}
#dolphinnav ul li a.current span {
    display:block;
    padding:0 20px 0 0;width:auto;
    background:#000000 url(images/dolphin_right-ON.gif) no-repeat top right;
    height:33px;
}
#dolphin_inner{
    color: white; 
    padding: 5px; 
    font-size: 80%; 
    height: 1em
}

#dolphin_inner a:link, 
#dolphin_inner a:visited, 
#dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}
body {background-color:#000000;} 
.innercontent{display: none;}

Code (Menu) HTML:

<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="about" class="innercontent">   
</div>
</div>
</div>

<script type="text/javascript">

//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 0)

</script>

Answer 1

This is fairly easy done. JSfiddle HERE The menu looks something like this.

<div> <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Heritage</a></li>
    <li><a href="#">Models</a></li>
    <li><a href="#">Dealers</a></li>
    <li><a href="#">Experience</a></li>
    <li><a href="#">Store</a></li> </ul>​ </div>

The css like this.

body{
    background: black;
}
li{

    float: left;
    margin-right: 10px;
}
a{
    color: gray;
    text-decoration: none;
    padding: 5px 10px;
}
a:hover{
    color: white;
    background: gray;
}
a.active{
    color: white;
}
.hover{
    color: white;
}

And JQuery like this

$(function(){
    $('a').hover(function(){
        $('a').removeClass('hover');
        $(this).addClass('hover');
    });
});​
​

What I've done is, the current page has a class "active". When it has the class "active" I give it css color white. With some other Jquery code you can detect on which page you are on. I haven't included it here... Maybe later if you really want it. But the main thing is that you can give the "<a href='#'>" a class "active" when it's on that page.

Okay next...

With JQuery I used "hover". If you hover over a link or in this case a nav item, I give it the class "hover". If you look at the css ".hover" it has "color: white;". If you hover over an item it removes the class "hover", but the item I'm hovering over right now, I give it a the class "hover".

Hopes it helps.