• Resolved ymous anon

    (@chicagodunn)


    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.