Thursday, February 21, 2013

css3 rounded corner navigation bar

HTML ---------- CSS ------- ul#list-nav { min-width: 1100px; margin:20px; } ul#list-nav li { /*border:1px solid #e9b428;*/ float:left; overflow:hidden; } li.first{ border-top-left-radius:5px; border-bottom-left-radius:5px; } li.last{ border-top-right-radius:5px; border-bottom-right-radius:5px; } ul#list-nav li a { text-decoration:none; padding:15px 0; width:200px; background-color:#ccc; color:black; float:left; text-align:center; background:-moz-linear-gradient(top, #fbdc8b 0%, #e9b428 100% ); background:-webkit-linear-gradient(top, #fbdc8b 0%, #e9b428 100% ); } ul#list-nav li a:hover { background:-moz-linear-gradient(top, #4d5d8a 0%, #404e78 100%); color:white; } ----------

No comments:

Post a Comment