Zaloguj | Zarejestruj | FAQ
Anonymous

menu horizontal

+ Odpowiedz

Posty: 4 Strona 1 z 1


menu horizontal

przez BugsBunny » N lut 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:
Kod: Zaznacz cały
<?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:

Kod: Zaznacz cały
* {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 użytkownika

BugsBunny

  • Posty: 22
  • Dołączył(a): So lis 10, 2012 6:25 am

Re: menu horizontal

przez XainPro » N lut 03, 2013 9:16 pm

.menu li:hover > ul {
z-index:100;
}
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: menu horizontal

przez BugsBunny » Pn lut 04, 2013 4:34 am

XainPro napisał(a):.menu li:hover > ul {
z-index:100;
}


disculpa amigo, pero esto no me funciono.

gracias por responder.
Avatar użytkownika

BugsBunny

  • Posty: 22
  • Dołączył(a): So lis 10, 2012 6:25 am

Re: menu horizontal

przez BugsBunny » Cz lut 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 użytkownika

BugsBunny

  • Posty: 22
  • Dołączył(a): So lis 10, 2012 6:25 am


+ Odpowiedz

Strona 1 z 1