For all those who have asked about how to create a menu with a list (and not a table), here is a basic menu created with an unordered list and CSS.
Markup
CSS
Markup
HTML:
<ul class="menu">
<li><a href="">home</a</li>
<li><a href="">products</a</li>
<li><a href="">press</a</li>
<li><a href="">support</a</li>
<li><a href="">contact</a</li>
</ul>
CSS
Code:
body {
margin-top:100px; /* JUST USED TO MOVE LIST DOWN PAGE */
}
ul, li, a {
margin:0;
padding:0;
}
ul.menu {
overflow:hidden;
}
ul.menu li {
list-style:none;
float:left;
border-top:solid 1px #bbb;
border-bottom:solid 1px #bbb;
border-right:solid 1px #bbb;
}
ul.menu li:first-child {
border-left:solid 1px #bbb;
}
ul.menu li a {
font:bold 11pt Tahoma, san-serif;
display:block;
height:40px;
line-height:42px;
color:#555;
text-align:center;
text-decoration:none;
text-transform:capitalize;
padding:0 30px;
background-color:#ddd;
}
ul.menu li a:hover {
color:#fff;
background-color:#666;
}
Last edited: