Menu Con Dreamweaver

Crear menú con CSS y HTML

Bueno, vamos a crear un exelente menú con HTML y CSS, empecemos!

Comenzamos con el HTML:

< div id="navlist">

<ul>

<li><a href="#" class="active">Ejemplo 1</a></li>

<li><a href="#">Ejemplo 2</a></li>

<li><a href="#">Ejemplo 3</a></li>

<li><a href="#">Ejemplo 4</a></li>

</ul>

</div>

Nos quedaría algo así:

Básicamente lo que hicimos acá fue crear un div, darle un id llamado navlist. Dentro de este div le agregamos una lista con el texto que queremos darle a este menú.

Seguimos con el CSS:

body{

background-color:#222;

margin:0px;

padding:0px;

font-family: Verdana, Arial, sans-serif;

font-size: 12px;

}

a{

text-decoration:none;

}

#navlist {

float: left;

width: 170px;

margin-top: 30px;

margin-left: 5px;

}

#navlist ul {

list-style: none;

}

#navlist li a{

display: block;

height: 25px;

width: 100px;

padding: 9px;

margin: 5px;

background: inherit;

border-right: 4px solid #444;

color: #999;

text-transform: lowercase;

font-size: 0.9em;

}

#navlist li a:hover {

color: #f4f4f4;

background: #333;

border-right: 4px solid #98cb00;

}

#navlist li .active {

color: #999;

background: #333;

border-right: 4px solid #444;

}

Bueno, acá le dimos estilos al body, un fondo y el tipo de fuente. Al navlist le dimos forma, un ancho, un alto, hover, active y varias cosas más.

Y nos quedaría algo así:

...