Thread

<div id="navigationContainer"><!--Nav Container-->
    <ul id="navigation"> <!--Start the list to hold the navigation -->
        <li><a href="/%22title=%22Turfmaker" title="Turfmaker ® Home">Home</a></li>
...
    </ul>
    <br clear="all" > <!-- clear the navigation floats -->
</div> <!-- close navigation div -->

@charset "utf-8";
/* CSS Document */

#navigationContainer{ /*create a styles for our navigationContainer div to hold our navigation */
    position:absolute; /* you can use relative, doesn't matter just need a postion set for the z-index to work correctly */
    z-index:100; /* ensures out navigation will be on top of any flash elements.*/
    background-image:url(../../../images/nav_bkg.png);
    background-repeat:no-repeat;
    color:#FFFFFF;
    height:2em;
    padding-top:3px;
    width:95%;
    margin-bottom:25px;
}
#navigation, #navigation ul { /* set your genral list styles*/
    padding: 0; /* loose all padding */
    margin: 0; /* loose all margins */
    list-style: none; /* remove the bullet from the list items */
    line-height: 25px; /* sets your line height, you'll need to edit this based on your font height so the hover class will work correctly */
}
#navigation a { /* set all styling for main level links */
    display: block; /* make the a tag finction like a div tag*/
    text-decoration: none;
    color:#FFFFFF;
}
#navigation li { /* all list items */
    float: left; /* make our list items line you in a hoizontal line */
    margin-left:15px;
    margin-right:15px;
    line-height: 25px;
}
#navigation li ul { /* sub menus */
    clear:left; /* ensure the sub level links do not float to the left of the main link. remove this for verticle menues */
    position: absolute; /* needed for hiding the sub menus*/
    /*width: 100px; /* need to set a width to keep the line items from floating */
    left: -999em; /* use left instead of display:none to hide sub menus since screen readers won't read anything in display:none */
    marign:0px;
}
#navigation li ul li{ /* sub menu list items */
    display: block;
    float: none;
    width: inherit;
    border: #666666;
    border-style:solid;
    border-width: 1px;
    background-image:url(../../../images/nav/bkg.png);
    padding-left:5px;
    padding-right:5px;
    margin:0px;
}
#navigation li ul a { /* set styling for sub level links */
    color:#FFFFFF; /* color is set to white since our background in this example is black */
    font-size:8pt;
}
#navigation li ul a:hover { /* set styles for the user mouses over the sub links */
    color:#CCCCCC; /* set color to grey */
    font-size:8pt;
}
#navigation li ul ul { /* third-and-lower-level lists */
    margin-left:100px; /* make all list past the second inset and extra 100px so they do not overlap */
}
#navigation li:hover > ul, #navigation .sfHover{ /* show submenu directly inside the correct li tag */   
    left: auto; /* on mouse over bring the sub links back from the left:-999em we set earlier */
}
#navigation li:hover { /* edit the li:hover class */
    position: static; /* fixing some browsers buggy handeling of the hover state */
}

sfHover = function() {
    var sfEls = document.getElementById("navigation").getElementsByTagName("LI");     
    for (var i=0; i<sfEls.length; i++) {         
        sfEls [ i ] . on mouse over=function() {             
            this.className+=" sfhover";         
        }         
        sfEls [ i ] . on mouse out=function() {             
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");         
        }     
    } 
} 
if (window.attachEvent) window.attachEvent("onload", sfHover);