登录 | 注册 | FAQ
Anonymous

menu horizontal

+ 发表回复

4 篇帖子 分页: 1 / 1


menu horizontal

BugsBunny » 周日 2月 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:
代码: 全选
<?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:

代码: 全选
* {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!!!
头像

BugsBunny

  • 帖子: 22
  • 注册: 周六 11月 10, 2012 6:25 am

Re: menu horizontal

XainPro » 周日 2月 03, 2013 9:16 pm

.menu li:hover > ul {
z-index:100;
}
头像

XainPro

  • 帖子: 3933
  • 注册: 周五 2月 17, 2012 8:10 pm

Re: menu horizontal

BugsBunny » 周一 2月 04, 2013 4:34 am

XainPro 写道:.menu li:hover > ul {
z-index:100;
}


disculpa amigo, pero esto no me funciono.

gracias por responder.
头像

BugsBunny

  • 帖子: 22
  • 注册: 周六 11月 10, 2012 6:25 am

Re: menu horizontal

BugsBunny » 周四 2月 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!!!
头像

BugsBunny

  • 帖子: 22
  • 注册: 周六 11月 10, 2012 6:25 am


+ 发表回复

分页: 1 / 1