Menu horizontal semelhante a esse:
![]()
01. Adicione ao seu css o código a seguir:
#menu {
list-style: none;
float: left;
height: 25px;
width: 465px;
padding-left:15px;
margin-top: 150px;
}
#menu ul {
padding: 0px;
margin: 0px;
float: left;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#menu ul li {
display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#menu ul li a {
display: block;
width: 61px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #FEC2E1;
background-color: #FFF1F9;
border:1px solid #FEC2E1;
vertical-align:middle;
}
#menu ul li a:hover, #menu li.current a {
color: #c0c0c0;
background-color: #f8f8f8 ;
text-decoration: none;
border:1px solid #c0c0c0;
}
O posicionamento do meu é feito em #menu.
2. Onde quer que o menu apareça, use:
<div id="menu">
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
</ul>
</div>


26-02-2009 | 14:51 
Só qeuria dizer que adorei esse tutorial sobre menu, dos vários que tentei esse foi o mais fácil que encontrei para utiçizar no meu blog. O seu site já está na minha seção de créditos!