Revision: 50539
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at August 26, 2011 04:42 by officiallyWise
Initial Code
/* Horizontal Main Nav ----------------------------------------------------------------------------------------------------*/ div#mainnav { position:relative; z-index:100; padding: 0px 0 0 0px; } div#mainnav ul { padding: 0px; margin: 0px; list-style-type:none; } div#mainnav li { float:left; position:relative; margin: 0px; padding: 0px; list-style-type:none; } /* style the links for the top level */ div#mainnav a { font-size: 12px; height: 19px; color: #1a1a1a; text-decoration: none; text-align:center; padding: 9px 12px; display: block; font-weight: bold; text-transform: uppercase; width: auto; margin: 0; } /* Style the first navigation button */ div#mainnav li:first-child a { } div#mainnav ul li a.current { background-color:#000; } div#mainnav a:hover, div#mainnav ul li:hover { color: #FFCC00; background: #354356; } /* Drop Down CSS ----------------------------------------------------------------------------------------------------*/ div#mainnav ul ul { visibility:hidden; position:absolute; height: 0; top: 41px; left:0; z-index: 98 } /* style the second level links */ div#mainnav ul ul a, div#mainnav ul ul a:visited { background:#4c637e; color:#fff; height:auto; padding: 12px 5px; width: 200px; border-width:0 1px 1px 1px; } /* Style the first drop down navigation button */ div#mainnav ul ul li:first-child a { } div#mainnav ul ul a:hover, div#mainnav:hover > a, div#mainnav ul ul:hover > a { color: #FFCC00; background: #354356; } /* style the third level background */ div#mainnav ul ul ul { left: 211px; top: 0px; width:129px; position: absolute; z-index: 99 } div#mainnav ul ul ul a, div#mainnav ul ul ul a:visited { background:#FFCC00; color: #000; } /* Style the first drop down navigation button of a drop down */ div#mainnav ul ul ul li:first-child a { } div#mainnav ul ul ul a:hover { color: #FFCC00; background: #354356; } /* style the table so that it takes no part in the layout - required for IE to work */ div#mainnav table { position:absolute; top:0; left:0; border-collapse:collapse; } /* make the second level visible when hover on first level list OR link */ div#mainnav ul li:hover ul, div#mainnav ul a:hover ul { visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ div#mainnav ul:hover ul ul { visibility:hidden; } /* make the third level visible when you hover over second level list OR link */ div#mainnav ul:hover ul :hover ul { visibility:visible; }
Initial URL
Initial Description
This is PURE CSS. Tested in IE7+, Chrome, Firefox, Safari and Opera
Initial Title
CSS Horizontal Navigation
Initial Tags
css, navigation
Initial Language
CSS