First item in Navigation — Hover CSS help?
-
What I want to do is make the first hovered link have a left radius border. I’m not sure of how to do this for the FIRST LI item only. Can anyone help?
here is some CSS for my menu/navigation on my site:
#nav { clear: both; height: 45px; background: url(images/nav1.png); color: #FFFFFF; margin: 0 auto 0; padding: 0; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft:10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; border-bottom: 7px solid #f69c26; } #nav .wrap { width: 960px; margin: 0 auto 0; } #nav ul { width: 100%; float: left; list-style: none; margin: 0; padding: 0; } #nav li { float: left; list-style: none; margin: 0; padding: 0; } #nav li a { background: url(images/nav1.png); color: #FFFFFF; display: block; font-family: Frutiger-Roman, Arial, Tahoma, Verdana; font-size: 11.53 pt; margin: 0; padding: 13px 15px 12px 15px; text-decoration: none; position: relative; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft:10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; } #nav li a:hover, #nav li a:active, #nav .current_page_item a { color: #453120; background: url(images/nav2.png); border-top-right-radius: 0px; border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-topleft:0px; -webkit-border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; }Any ideas?
The topic ‘First item in Navigation — Hover CSS help?’ is closed to new replies.