/ Published in: CSS
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* ----------| Navigation |---------- */ #navigation ul#nav { z-index: 4000; background: #14735d url(../images/tab-bg.gif) repeat-x left top; list-style: none; } #navigation ul#nav li { position: relative; float: left; text-align: center; line-height: 1em; list-style: none; } #navigation ul#nav li a { display: block; padding: 12px 0; color: #fff; text-decoration: none; text-align: left; border-right: 1px solid #009290; font-size: 13px; text-align: center; font-family: "Trebuchet MS",Arial,sans-serif; } #navigation ul#nav li a span { padding: 0 15px 0 10px; } #navigation .item1 { width: 90px; } #navigation .item2 { width: 137px; } #navigation .item3 { width: 171px; } #navigation .item4 { width: 147px; } #navigation .item5 { width: 125px; } #navigation .item6 { width: 106px; } #navigation .item7 { width: 93px; } /* ----------| Navigation (Drop Down) |---------- */ #navigation ul#nav li ul { display: block; position: absolute; left: -999em; width: 162px; padding: 3px 8px 3px 8px; background: #199985 url(../images/sub-bg.gif) repeat-x left top; border-bottom: 5px solid #009290; } #navigation ul#nav li:hover ul, #navigation ul#nav li.over ul /* used to target IE via script */ { display: block; left: 0; top: 100%; position: absolute; z-index: 3000; width: 146px; } #navigation ul#nav li ul li { width: 146px; height: auto; background: transparent; text-indent: 0; padding: 0; } #navigation ul#nav li:hover ul li a, #navigation ul#nav li.over ul li a { display: block; width: 126px; background: transparent; padding: 7px 10px; text-decoration: none; margin: 0; color: #eee; text-indent: 0; text-align: left; border: 0; font-size: 11px; white-space: nowrap; } #navigation ul#nav li ul li a:hover { color: #fff; background-color: #66bebc; } #navigation ul#nav li.active a, #navigation ul#nav li a:hover, #navigation ul#nav li:hover a, #navigation ul#nav li.over a { background: #009290; }