Primero antes que nada muy buenos dias, me dirigo a ustedes para solicitar su ayuda, por favor me podrian ayuda con lo siguiente:
descargue un menu horizontal de esta pagina http://cssmenumaker.com/
para ser exactos el http://cssmenumaker.com/builder/menu_info.php?menu=011
pero mi problema es que le creo sub-menus
en el codigo lo hice de esta manera:
<ul id="menu">
<li><a href="../index.php" title="">INICIO</a></li>
<li><a href="../login.php" title="">ALUMNOS</a></li>
<li><a href="../login.php" title="">DOCENTES</a></li>
<li><a href="#" title="">ADMINISTRACION</a>
<ul>
<li><a href="../usuarios.php" title="">USUARIOS</a></li>
<li><a href="../status.php" title="">STATUS</a></li>
<li><a href="../nivel_acceso.php" title="">NIVEL DE ACCESO</a></li>
</ul>
</li>
<li><a href="../contacto.php" title="" >CONTACTANOS</a></li>
<li><a href="#" title="">ACERCA</a></li>
</ul>
hasta ahi todo bien, pero en el archivo menu_style.css
tengo que modificar el sub-menu pero no me queda me sale de la siguiente manera:
ul#menu{
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 #004c99;
border-top:1px solid #74b0c6;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;}
ul#menu li a{
display:block;
float:left;
color:#6d7078;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("images/DIVIDER.gif") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("images/HOVER.gif") no-repeat top right;
}
/*#######################################
*/
/*Aqui empeze a modificar para sub menu
*/
ul#menu li ul {
display: none; /* De lo que hablábamos */
background:transparent url("images/OFF.gif") repeat-x top left;
padding: 10px 0;
position: absolute; /* Muy importante */
margin: -12px -20px; /* Lo colocamos donde queremos */
.margin: 69px -170px; /* Hacks para colocarlo bien en ie */
_margin: 69px -170px;
}
ul#menu li:hover ul {
display: block;
}
ul#menu li ul li {
display: block;
float: none;
position: relative;
color:#6d7078;
padding: 0 20px;
line-height: 30px;
}
ul#menu li ul span {
background: url('images/HOVER.gif');
margin: -20px 50px;
width: 20px;
height: 10px;
position: absolute;
}
maestros por fa si me podria ayudar les estaria eternamente agradecidos, gracias por su atencion