by Alex Holt | Aug 15, 2008 | Dev, Tips & Tricks, Web |
To start with, we create the markup for our navigation.. <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="about/">About</a></li> <li><a href="contact/">Contact</a></li></ul> Obviously you can put as many or few items as you need into the list. Now to style the list…. first we’ll style it horizontally: ul.nav,ul.nav li,ul.nav li a { display:block; float:left; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-right: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} and now vertically, just to show how it works… ul.nav,ul.nav li,ul.nav li a { display:block; margin:0; padding:0;}ul.nav li a{ padding: 4px 8px; text-decoration: none; background: #ccc; border: 1px solid #999; margin-bottom: -1px;}ul.nav li a:hover{ background: #f90; color: #fff;} Obviously, you have the freedom to apply any CSS you want to...
