Tema: hacer menu desplegable ,lista
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 01/05/2013, 16:32
ghost_darknet
 
Fecha de Ingreso: mayo-2012
Ubicación: shilito
Mensajes: 67
Antigüedad: 12 años, 6 meses
Puntos: 3
Respuesta: hacer menu desplegable ,lista
Aca te dejo una muestra de un menu desplegable usando HTML y CSS

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Menu</title>
  6. <link href="estilos/menu_portal.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="Contenedor-principal">
  11.  
  12. <h1 class="logo-inicio">Loq ue quieres colocar<span class="forma-logo"></span></h1><br/>
  13.  
  14. <h4 class="salir"><a href="../salir.php">Salir</a></h4>
  15.  
  16. <div class="Volver"><a href="../menu.php">Volver Menu Principal</a><span class="forma"></span></div>
  17.  
  18. <div id="espacio-menu" class="contenedor">
  19.     
  20.     <ul class="nav">
  21.     <li><a href="">Menu 1</a>
  22.         <ul>
  23.             <li><a href="">Sub menu 1 A</a>
  24.                 <ul>
  25.                     <li><a href="#">Submenu 1 a 1</a></li>  
  26.                     <li><a href="#">Submenu 1 a 2</a></li>                
  27.                 </ul>
  28.             </li>
  29.             <li><a href="#">Submenu 1 B</a>
  30.                 <ul>
  31.                     <li><a href="asignacion/ingreso_movimiento.php">Submenu 1 b 1</a></li>
  32.                 </ul>
  33.             </li>
  34.     <li><a href="#">Menu 2</a>
  35.         <ul>
  36.             <li><a href="#">Submenu 2</a>
  37.                 <ul>
  38.                     <li><a href="#">Submenu 2 a 1</a></li>
  39.                     <li><a href="#">Submenu 2 a 2</a></li>
  40.                 </ul>
  41.             </li>     
  42.             <li><a href="#">Menu 3</a></li>
  43.             <li><a href="#">Submenu 3</a></li>
  44.         </ul>
  45.     </li>
  46.  
  47. </div>
  48. </div>
  49. </body>
  50. </html>


el CSS seria algo asi

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. #Contenedor-principal{
  4.     background-color:#a2b4ea;
  5.     width: 960px;
  6.     height: 500px;
  7.     font-family:Arial;
  8.     margin:auto;
  9.     padding-left:25;
  10. }
  11.  
  12.  
  13. .logo-inicio{
  14.     background-color: #E0E6F8;
  15.     font-family: Arial;
  16.     margin: auto;
  17.     padding-left: 25;
  18.     width: 35%;
  19.     color: #013ADF;
  20. }
  21.  
  22. h1,h2,h3{
  23.     font-family: Verdana, Geneva, sans-serif;
  24.     color:#0080ff;
  25. }
  26.  
  27. .contenedor{
  28.     width:619px;
  29.     height:42px;
  30.     background-color:#CCC;
  31.     text-decoration:none;
  32.     margin:auto;
  33.     padding:5px;
  34. }
  35.  
  36. #usuario-login{
  37.     color: #fff;
  38.     background-color: #2E64FE;
  39.     padding: 10px 20px;
  40.     margin-left: -20px;
  41.     position: relative;
  42.     width: 30%;
  43.     border-radius: 0px 50px 50px 0px;
  44.     box-shadow: 1px 1px 5px #000;
  45.     -moz-box-shadow: 1px 1px 5px #000;
  46.     -webkit-box-shadow: 1px 1px 5px #000;
  47.     margin-bottom: 10px;
  48. }
  49. a:link {
  50.     text-decoration:none;
  51.     color:#FFF;
  52. }
  53.  
  54. a:visited {
  55.     text-decoration:none;
  56.     color:#FFF;
  57. }
  58.  
  59. a:hover {
  60.     text-decoration:none;
  61.     color:#fff;
  62.     font-size:18px;
  63. }
  64.  
  65. .salir{
  66.     text-decoration: none;
  67.     background-color: #2E64FE;
  68.     padding: 2px 2px;
  69.     margin-right: -5px;
  70.     float: right;
  71.     position: top;
  72.     width: 5%;
  73.     -moz-box-shadow: 1px 1px 5px #000;
  74.     -webkit-box-shadow: 1px 1px 5px #000;
  75.     margin-bottom: 1px;
  76. }
  77.  
  78. .nav {
  79. font-family:sans-serif;
  80. list-style:none;
  81. text-decoration:none;
  82. margin:auto;
  83. padding:0;
  84. }
  85.  
  86. .nav > li {
  87. float:left;
  88. }
  89.  
  90. .nav li a {
  91. background:#2E64FE;
  92. color:#FFF;
  93. display:block;
  94. border:1px solid;
  95. padding:10px 12px;
  96. }
  97.  
  98. .nav li a:hover {
  99. background:#0fbfc6;
  100. }
  101.  
  102. .nav li ul {
  103. display:none;
  104. position:absolute;
  105. min-width:150px;
  106. }
  107. .nav li:hover > ul {
  108. display:block;
  109. }
  110.  
  111. .nav li ul li {
  112. position:relative;
  113. }
  114.  
  115. .nav li ul li ul {
  116. right:-150px;
  117. top:0;
  118. }
  119.  
  120. .Volver{
  121.     background-color:#2E64FE;
  122.     color:FFF;
  123.     padding:10px;
  124.     margin-top:19px;
  125.     margin-left:-19px;
  126.     position:relative;
  127.     width:19%;
  128.     box-shadow:1px 1px 5px #000; 
  129.     -moz-box-shadow:1px 1px 5px #000; /*mozilla*/
  130.     -webkit-box-shadow:1px 1px 5px #000; /*APPLE*/
  131.     -ms-box-shadow:1px 1px 5px #000; /*Microsoft*/
  132.     -xv-box-shadow:1px 1px 5px #000; /*opera*/
  133.     margin-bottom:8px;
  134.     border-radius:0px 20px 20px 0px;
  135. }
  136.  
  137. .forma{
  138.     width:0px;
  139.     height:0px;
  140.     line-height:0px;
  141.     border-left:20px solid transparent;
  142.     border-top:10px solid #03C;
  143.     position:absolute;
  144.     top:100%;
  145.     left:0px;
  146. }