Pues yo te aconsejo hacerlo de la siguiente manera puesto que yo acostumbro a separar el archivo css del html pero este te servira recuerda que no todas las aplicaciones que se hagan con css seran bien desplegadas en IE.
<html>
<head>
<title> menu en css </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #000000;/*color de fondo pagina*/
/*behavior:url("../htc/csshover.htc");*/
}
*{
font-family:Verdana, Arial, Helvetica, sans-serif;/*tipo letra menu/submenu*/
font-size:10px;/*tamano letra menu/submenu*/
}
/* the menu */
ul,li,a {
display:block;
margin:0;/*menu hacia arriba*/
padding:0;/*tamano menu ancho*/
}
ul {
width:150px;/*tamano margen menu*/
border:0px solid #00cc00; /*color margen del menu*/
background:#000000;/*color del fondo del menu*/
list-style:none;
}
li {
/*position:relative;*/
padding:2px;
padding-left:18px;/*margen derecho de la letra*/
/*background:url("images/menos1.ico") no-repeat; /*imagen menu si submenu*/
z-index:9;
}
li.folder { background:url("images/next.ico") no-repeat; }/*imagen menu con submenu*/
li.folder ul {
/*position:absolute; (desabilita el submenu desplegable)*/
left:120px; /* IE */
top:18px;/*alineacion vertical del sub-menu*/
}
li.folder>ul { left:0px; } /* submenu posicion hacia la derecha */
a {
padding:2px;/*separacion entre lineas menu*/
border:0px solid white;/*tamano del borde del seleccion del menu*/
text-decoration: inherit;/*efectos en la letra del menu*/
color:#ffffff;/*color de letra del menu*/
font-weight: bold;/*estilo letra del menu*/
width:100%; /* IE */
}
li>a { width:auto; } /* others */
li a.submenu {
/* border:inset;efecto letra menu*/
background:url("images/sub.gif") left no-repeat;
}
/* regular hovers */
a:hover {
/*border-color:#000000; borde del menu hover*/
background-color: #009933;/*color fondo menu hover*/
color:#ffffff;/*color blanco letra submenu hover*/
}
li.folder a:hover {
background-color: #009933;/*marcado menu hover desplegable*/
}
/* hovers with specificity */
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#ffffff;
}
</style>
</head>
<body>
<table width="20%" border="1" cellpadding="1" cellpadding="1" bgcolor="#0099FF">
<tr><td></td></tr></table>
<p></p>
<table width="20%" border="1" cellpadding="1" cellspacing="1" bgcolor="#009900">
<tr>
<td><center>
<span class="style1">Nuestro menu principal</span>
</center></td>
</tr>
</table>
<ul id="menu">
<li><a href="#" target="mainFrame">menu1</a></li>
<li class="folder">
<a href="#" class="submenu">menu2</a>
<ul>
<li><a href="#" target="mainFrame">submenu2</a></li>
<li><a href="#" target="mainFrame">submenu2</a></li>
<li><a href="#" target="mainFrame">submenu2</a></li>
<li><a href="#" target="mainFrame">submenu2</a></li>
</ul>
<li class="folder">
<a href="#" class="submenu">menu3</a>
<ul>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
<li><a href="#" target="mainFrame">submenu3</a></li>
</ul></li>
<li class="folder">
<a href="#" class="submenu">menu4</a>
<ul>
<li><a href="#" target="mainFrame">submenu4</a></li>
<li><a href="#" target="mainFrame">submenu4</a></li>
<li><a href="#" target="mainFrame">submenu4</a></li>
</ul></li>
<li class="folder">
<a href="#" class="submenu">menu5</a>
<ul>
<li><a href="#" target="_blank">submenu5</a></li>
<li><a href="#" target="_blank">submenu5</a></li>
<li><a href="#" target="_blank">submenu5</a></li>
<li><a href="#" target="_blank">submenu5</a></li>
<li><a href="#" target="_blank">submenu5</a></li>
</ul></li>
</body>
</html>
Escrito el 09 Ago 2007 09:24 pm
