Menú básico CSS

Menús sencillos en css utilizando listas.

Ejemplo 1

CSS code

.menu{ padding: 5px; margin:auto; text-align:left; background-color:#666666; } .menu ul li{ display: inline; padding:0; margin:0; } .menu ul li a{ padding: 5px; margin:0;color:#f4f4f4; text-decoration:none; } .menu ul li a:hover{ text-decoration:underline; color:#ddd; } .select{text-decoration:underline !important;}

Ejemplo 2

CSS code

.menu{ padding: 5px; margin:auto; text-align:left; background-color:#666666; } .menu ul li{ display: inline; padding:0; margin:0; } .menu ul li a{ padding: 5px; margin:0;color:#f4f4f4; text-decoration:none; } .menu ul li a:hover{ color:#004A7F; background-color:#0094FF; } .select{background-color:#0094FF;}

Ejemplo 3 (con imágenes)

CSS code

.menu{ padding: 6px; margin:auto; text-align:left; background:url(menu_basico_back.jpg) #333 repeat-x left top; } .menu ul li{ display: inline; padding:0; margin:0; } .menu ul li a{ padding: 3px 5px 3px 5px; margin:0;color:#f4f4f4; text-decoration:none; border-right:1px solid #888; } .menu ul li a:hover{ color:#004A7F; background-color:#0094FF; background:url(menu_basico_front.jpg) #3C749D repeat-x left top; } .select{background-color:#0094FF;}

Imágenes

HTML code para todos los ejemplos

<div class="menu1"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#" class="select1">Menu 6</a></li> </ul> </div>