Estoy tratando de hacer un menú horizontal.
Utilicé el sitio cssmenumaker (menú 527488). Pero no funciona, solo muestra una lista.
Estos son los archivos.
index.html
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejemplo Menú</title>
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last'><a href='#'><span>Item</span></a></li>
</ul>
</div>
</body>
</html> Mi archivo CSS:
Código HTML:
#cssmenu ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url('images/off.gif') repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #555555;
border-top:1px solid #919191;
}
#cssmenu li{
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a{
display:block;
float:left;
color:#8c3a3a;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url('images/divider.gif') no-repeat top right;
}
#cssmenu li a:hover{
background:transparent url('images/hover.gif') no-repeat top right;
}
Alguna idea? Gracias.
