Web

Menu vertical utilizando CSS

Por em

Muitas vezes nos preocupamos tanto em como fazer um menu horizontal com CSS que quando vamos fazer um menu vertical temos aquele branco!

Segue abaixo um exemplo:

CSS:

#left_menu {
width: 173px;
margin-left: 5px;
}

#left_menu ul li{
height: 23px;
line-height: 23px;
background: url(/images/menu_left_item.jpg) no-repeat;
width: 163px;
font-size: 11px;
padding-left: 10px;
color: #505050;
}

#left_menu ul li a{
text-decoration: none;
color: #505050;
}

#left_menu ul li a:hover{
text-decoration: underline;
color: #505050;
}

#left_menu ul li.ativo {
background: url(/images/menu_left_item_active.jpg) no-repeat;
font-weight: bold;
text-decoration: underline;
color: #86b801;
}

XHTML:

Pontos importantes que todos sempre esquecem:

  • Sempre quando setarmos uma altura para o item temos que fazer o mesmo com a altura da linha: line-height
  • “#left_menu ul li.ativo” sempre quando formos indicar uma classe ao “li” o “.” deve ser concatenado como nesse exemplo

Qualquer dúvida, comentem!