Menu vertical com CSS

Neste tutorial vou mostrar as técnicas CSS para construção de menus de navegação verticais com efeitos rollover de cor .
Ao final da leitura deste tutorial você estará capacitado a projetar menus verticais com uso do elemento HTML list, bem como adicionar-lhe efeitos de rollover com uso das CSS.

As técnicas CSS para construção de menus de navegação preconizam o emprego do elemento HTML list não ordenada – tag – , por apresentarem grande flexibilidade e versatilidade para estilização.

O príncipio básico de construção da estrutura HTML do menu consiste em tirar proveito do fato de o elemento comportar-se como se fosse uma divisão (elemento nível de bloco) e dentro dela divisão, enclausurar em cada elemento (elemento nível de bloco), um link (elemento inline), como um item da lista.

Com isto, conforme você verá a seguir teremos uma estrutura HTML na sequência: ul ==> li ==> a

O que nos proporciona 03 (três) elementos HTML possíveis de serem estilizados, advindo daí a versatilidade das listas para menus o que acrescido ao fato da disposição visual “empilhada” inerente as listas torná-las o elemento HTML preferido e largamente usado para construção de menus com CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Vertical</title>
<style type="text/css">
<!--
ul#menu {
width:200px;
border:1px solid #003399;
background:#FADE8B;
margin:0;
padding:0;
list-style-type:none;
}
ul#menu li {
border-bottom:1px solid #A4A0F5;
}
ul#menu li a:link, ul#menu li a:visited {
display:block;
height:1%;
text-decoration:none;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
color:#5E0F50;
border-left:10px solid #EEC591;
padding-left:5px;
}
ul#menu li a:hover {
background-color: #FFE4B5;
color:#DAA520;
border-left:10px solid #FFD39B;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutoriais CSS</a></li>
<li><a href="#">Normas XHTML do W3C</a></li>
<li><a href="#">Posicionamento CSS</a></li>
<li><a href="#">Contato</a></li>
</ul>
</body>
</html>

Nós queremos saber sua opinião aqui