Identificarse | Registrarse | FAQ
Anonymous

menu horizontal

+ Publicar una respuesta

4 mensajes Página 1 de 1


menu horizontal

por BugsBunny » Dom Feb 03, 2013 1:57 am

hola amigos, estoy haciendo un menu horizontal con submenus en bloques, el problema es que si pongo otro submenu, por ejemplo en la opcion de vales, el submenu me sale abajo de catalogos. les dejo el codigo tanto de html como css:
HTML:
Código: Seleccionar todo
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
      <title>Prueba de PHP</title>
      <link href="encabezado.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="empresa">
   Empresa de Prueba
</div>
<div class="menu">
   <ul>
      <li><a href="#">Catalogos&#9660</a> <!-- &#9660 es una flecha abajo -->
         <ul>
            <li><a href="#">Operadores</a></li>
            <li><a href="#">Ciudades</a></li>
            <li><a href="#">Rutas</a></li>
            <li><a href="#">Clientes Factura</a></li>
            <li><a href="#">Clientes Remitente</a></li>
            <li><a href="#">Clientes Destino</a></li>
            <li><a href="#">Tarifas</a></li>
          </ul>
      </li>
       </span>
      <li><a href="#">Cartaporte</a></li>
      <li><a href="#">Vales</a>
         <ul>
            <li><a href="#">Consulta de Vales</a></li>
            <li><a href="#">Generacion de Vales</a></li>
            <li><a href="#">Reimpresion de vales</a></li>
          </ul>
      </li>
      <li><a href="#">Liquidaciones</a></li>
      <li><a href="#">Facturacion</a></li>
      <li><a href="#">CxC</a></li>
     </ul>
</div>

</body>
</html>   



CSS:

Código: Seleccionar todo
* {margin:0;padding:0;}

body{background-color: #999999;}

.empresa {
   float: left;
   width: 100%;
   height:1.5em;
   padding-top:0.2em;
   background: #00BFFF;
   font-size: 2em;
   text-align:center;
}

.menu{
   float: left;
   width: 100%;
   padding-top:0.5em;
   padding-bottom:0.5em;
   background: #4169E1;
     font-family:Arial;
   font-size:1em;
   color:#FFFFFF;
}

.menu > ul > li { /*hijos directos de ul de menu*/
   display:inline;
}

.menu a{
   text-decoration: none;
   padding: 4px 18px;
   color:#FFFFFF;
}

.menu a:hover {
  color: #000;
  background: #DCDCDC;
}

.menu ul li ul {
   display:none;
}

.menu li:hover > ul {
   position:absolute;
   display:block;
   background-color: #4169E1;
   padding-top: 0.5em;
}


espero me puedan ayudar, gracias!!!
Avatar de Usuario

BugsBunny

  • Mensajes: 22
  • Registrado: Sab Nov 10, 2012 6:25 am

Re: menu horizontal

por XainPro » Dom Feb 03, 2013 9:16 pm

.menu li:hover > ul {
z-index:100;
}
Avatar de Usuario

XainPro

  • Mensajes: 3933
  • Registrado: Vie Feb 17, 2012 8:10 pm

Re: menu horizontal

por BugsBunny » Lun Feb 04, 2013 4:34 am

XainPro escribió:.menu li:hover > ul {
z-index:100;
}


disculpa amigo, pero esto no me funciono.

gracias por responder.
Avatar de Usuario

BugsBunny

  • Mensajes: 22
  • Registrado: Sab Nov 10, 2012 6:25 am

Re: menu horizontal

por BugsBunny » Jue Feb 14, 2013 5:46 pm

despues de mucho batallar aqui les dejo como quedo, funcionando al 100%, para a quien le pueda sirva:

solo agregue float:left en la clase .menu > ul > li y eso es todo, FUNCIONO!!!

ya se que para expertos es algo facil, pero para novatos como yo es todo un triunfo, NO TEMAN PREGUNTAR, MAS VALE PARECECR TONTO QUE QUEDARSE CON LA DUDA.

SALUDOS!!!
Avatar de Usuario

BugsBunny

  • Mensajes: 22
  • Registrado: Sab Nov 10, 2012 6:25 am


+ Publicar una respuesta

Página 1 de 1