Foros del Web » Creando para Internet » CSS »

menu estilo css

Estas en el tema de menu estilo css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/02/2012, 03:43
 
Fecha de Ingreso: febrero-2012
Mensajes: 1
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta menu estilo css

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
  #2 (permalink)  
Antiguo 12/02/2012, 06:47
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: menu estilo css

Ante todo, beinvenido @swordfishcerberos

Si tu menú horizontal requiere de submenues, lo más apropiado sería que utilices otro de los asistentes/plantillas, ya que el que pusiste es solo un menu horizontal.

Por ejemplo, este

http://cssmenumaker.com/builder/menu_info.php?menu=001

(son los de las categorias Drop Down Menus )
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 12/02/2012, 06:56
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: menu estilo css

Hola
Código CSS:
Ver original
  1. /*#######################################
  2. */
  3. /*Aqui empece a modificar para sub menu
  4. */
  5. ul#menu li ul {
  6. display: none; /* De lo que hablábamos */
  7. background:transparent url("images/OFF.gif") repeat-x top left;
  8. padding: 10px 0;
  9. position: absolute; /* Muy importante */ /*Siempre y cuando definas la posicion con left, top, bottom o right */
  10. top:25px; /*defines la posición usando TOP */
  11. margin: -12px -20px; /* Lo colocamos donde queremos */
  12. .margin: 69px -170px; /* Hacks para colocarlo bien en ie */
  13. _margin: 69px -170px;
  14. }

Espero que te ayude
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: estilocss, menu+deplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:47.