Horizontal Navigation Bar Done In CSS

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav {

Solution 1:

You can see here,

http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

Example Here:

http://www.cssnewbie.com/example/horizontal-menu/

Solution 2:

I eradicated the stairstep problem by removing one line in the original CSS code. Comment out the position:inherit; statement within the #nav block.

Solution 3:

Try to remove this :display:block; and set #nav ul li to display:inline;

this code is woking, but you may change it to fit your needs:

#nav {
background-color:#F0D5AA;
}
#nav ul {
list-style-type:none;
padding-top:3px;
padding-bottom:3px;
}
#nav ul li {
display:inline;
}
#nav a:link, a:visited {
text-align:center;
padding:3px;
}