I have been struggling for some time trying to create a simple, unordered horizontial list menu using css. Well, I found some inspiration and figured out the problem. Inspired by the Centered List Navbar Updated at Listamatic, and comments by another menu creator at Listamatic, I was able to create a menu like you will find on my footer. This hasn’t been tested on any Windoz machines yet, but it works fine in FireFox, Safari, and Camino on Mac OSX.
First, here is the HTML you will need (you can expand or contract the list as needed:
<div id="footercontainer">
<ul>
<li class="first"><a href="#">Link text one</a> you can also add text outside the link.</li>
<li><a href="#">Just link text</a></li>
<li><a href="#">Link text three</a> you can also add text outside the link.</li>
</ul>
</div>
Before I get to the css, you will notice one change I made because I was using this for a footer: I did not want all of the text in a list item as a link, therefore I had to change where the border (pipe) was added. Originally the border was added to the link; the border is now added to the left of the list item.
#footercontainer ul
{
text-align: center;
padding: .1em 0;
margin: 1.25em 0;
background-color: #fff;
color: #666;
width: 100%;
line-height: 140%;
font-size: 85%;
}
#footercontainer ul li
{
display: inline;
padding: .2em .5em;
border-left: 1px solid #e72000;
}
#footercontainer ul li.first
{
border-left: none;
}
#footercontainer ul li a
{
color: #0000cd;
text-decoration: none;
}
#footercontainer ul li a:hover
{
color: #e72000;
text-decoration: underline;
}
Hope you find this helpful. You can contact me with comments or suggestions.