Continuing with the same unordered list :
<ul id="nav"> <li><a href="#" class="current"><span>Home</span></a></li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Our Work</span></a></li> <li><a href="#"><span>Contact Us</span></a></li> </ul>
Instead of vertical, now we’ll set the list items to horizontal. First you’ll need to download the images to the navigation to which in the zip file is a started HTML file.
<head>
<style type="text/css">
<!--
#nav {/*The UL tag itself*/}
#nav li {/*The individual List Items*/}
#nav li a {/*The links to each List Item*/}
#nav li a span {/*The links internal span*/}
#nav li a:hover {/*When the mouse hovers over the link*/}
#nav li a:hover span {/*When the mouse hovers over the link effecting the span*/}
#nav li a.current, #nav li a.current:hover {/*For the links with the class of current*/}
#nav li a.current span {/*For the links with the class of current and the span contained within*/}
-->
</style>
</head>
Working from the top down here’s the attributes for #nav
#nav {/*The UL tag itself*/
position:relative;
font-size:14px;
text-transform:uppercase;
background:#fff url("images/nav_bg.jpg") repeat-x bottom left;
font-family:Georgia, "Times New Roman", Times, serif;
margin:0;
padding:0;
list-style:none;/*disable the bullets*/
width:auto;
float:left;
}
Next define the individual list items
#nav li {
display:block;
float:left;
margin:0 2px;
}
Then the individual links for each list items
#nav li a {
display:block; /*Ensures that background color fills the entire link*/
float:left;
color:#ffdab6;
text-decoration:none; /*Disables the default underline*/
padding:0 0 0 25px;
height:43px;
line-height:50px;
}
Now the individual link’s internal span
#nav li a span {
display:block;
float:left;
padding:0 25px 0 0;
height:31px;
width:auto;
}
Now the individual link’s hover states
#nav li a:hover {
background:#fff; /*White*/
}
The individual link’s hover states effecting the span
#nav li a:hover span {
display:block;
cursor:pointer;
}
Finally the individual link’s hover states
#nav li a.current, #nav li a.current:hover {
color:#7b6695;
background:transparent url("images/nav_left.jpg") no-repeat top left;
}
Finally the individual link’s hover states
#nav li a.current, #nav li a.current:hover {
background:transparent url("images/nav_right.jpg") no-repeat top right;
height:43px;
}
So you should end up with this
<html>
<head>
<title>Vertical CSS Menu</title>
<style type="text/css">
<!--
#nav {
position:relative;
font-size:14px;
text-transform:uppercase;
background:#fff url("images/nav_bg.jpg") repeat-x bottom left;
font-family:Georgia, "Times New Roman", Times, serif;
margin:0;
padding:0;
list-style:none;
width:auto;
float:left;
}
#nav li {
display:block;
float:left;
margin:0 2px;
}
#nav li a {
display:block;
float:left;
color:#ffdab6;
text-decoration:none;
padding:0 0 0 25px;
height:43px;
line-height:50px;
}
#nav li a span {
display:block;
float:left;
padding:0 25px 0 0;
height:31px;
width:auto;
}
#nav li a:hover {
color:#fff;
}
#nav li a:hover span {
display:block;
cursor:pointer;
}
#nav li a.current, #nav li a.current:hover {
color:#7b6695;
background:transparent url("images/nav_left.jpg") no-repeat top left;
}
#nav li a.current span {
background:transparent url("images/nav_right.jpg") no-repeat top right;
height:43px;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#" class="current"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Our Work</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</body>
</html>
Ok that the basics (well sort of). Good luck.