Foros del Web » Creando para Internet » CSS »

mover menú desplegable

Estas en el tema de mover menú desplegable en el foro de CSS en Foros del Web. hola a todos, mi pregunta es la siguiente, tengo una lista horizontal , el cual cada enlace despliega un menu. hay alguna posibilidad de mover ...
  #1 (permalink)  
Antiguo 12/01/2013, 13:02
 
Fecha de Ingreso: septiembre-2012
Mensajes: 73
Antigüedad: 9 años, 10 meses
Puntos: 0
Pregunta mover menú desplegable

hola a todos, mi pregunta es la siguiente, tengo una lista horizontal , el cual cada enlace despliega un menu. hay alguna posibilidad de mover los menus que se despliegan a la derecha?. es decir por que cuando paso el raton por encima ,aparece justo al margen del enlace, quiero ponerlo mas a la derecha .. ayuda no c si me explico .


Código CSS:
Ver original
  1. /* main menu styles 2 */
  2. #nav2 {
  3.     display:block;
  4.     width:100%;
  5.    margin: 0px 0px;
  6.    
  7.     padding: 0px;
  8. z-index:1;
  9.  
  10.  
  11. }
  12. #nav2 li {
  13.     margin: 0px 0px 0px 0px;
  14.     float: left;
  15.     position: relative;
  16.     list-style: none;
  17.     z-index: 100;
  18.  
  19.    
  20. }
  21. #nav2 li a {
  22.     display:block;
  23.    
  24.     height:28px;
  25.  line-height: 28px;
  26.  
  27.     padding: 0px 1px 0px 1px;
  28.    
  29.    
  30.  
  31.     border-radius:0px; /*some css3*/
  32.     -moz-border-radius:0px;
  33.     -webkit-border-radius:0px;
  34.    
  35. }
  36.  
  37.  
  38.  
  39.  
  40. /* selected menu element */
  41. #nav2 .current a, #nav2 li:hover > a {
  42.     color: #000;
  43.     background-image: none;
  44.     background-position: 0;
  45.     border-top-width: 0px;
  46.     border-top-style: none;
  47. }
  48.  
  49. /* sublevels */
  50. #nav2 ul li:hover a, #nav2 li:hover li a {
  51.     background:none;
  52.     border:none;
  53.     color:#000;
  54. }
  55. #nav2 ul li a:hover {
  56.     background:#FF9933 url(../imagenes/bg.png) repeat-x 0 -100px;
  57.     color:#000;
  58.  
  59.     border-radius:0px; /*some css3*/
  60.     -moz-border-radius:0px;
  61.     -webkit-border-radius:0px;
  62.    
  63. }
  64.  
  65. #nav2 ul li:first-child > a {
  66.     -moz-border-radius-topleft:10px; /*some css3*/
  67.     -moz-border-radius-topright:10px;
  68.     -webkit-border-top-left-radius:10px;
  69.     -webkit-border-top-right-radius:10px;
  70. }
  71. #nav2 ul li:last-child > a {
  72.     -moz-border-radius-bottomleft:10px; /*some css3*/
  73.     -moz-border-radius-bottomright:10px;
  74.     -webkit-border-bottom-left-radius:10px;
  75.     -webkit-border-bottom-right-radius:10px;
  76. }
  77.  
  78. /* drop down */
  79. #nav2 li:hover > ul {
  80.     opacity:1;
  81.     visibility:visible;
  82. }
  83. #nav2 ul {
  84.     opacity:0;
  85.     visibility:hidden;
  86.     padding:0;
  87.     width:175px;
  88.     position:absolute;
  89.     background:#aabbcc url(../imagenes/bg.png) repeat-x 0 0;
  90.     border:1px solid #7788aa;
  91.  
  92.     border-radius:10px; /*some css3*/
  93.     -moz-border-radius:10px;
  94.     -webkit-border-radius:10px;
  95.     box-shadow:0 2px 2px rgba(0,0,0, .5);
  96.     -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
  97.     -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
  98.  
  99.     -moz-transition:opacity .25s linear, visibility .1s linear .1s;
  100.     -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
  101.     -o-transition:opacity .25s linear, visibility .1s linear .1s;
  102.     transition:opacity .25s linear, visibility .1s linear .1s;
  103. }
  104. #nav2 ul li {
  105.     float:none;
  106.     margin:0;
  107. }
  108. #nav2 ul a {
  109.     font-weight:normal;
  110.     text-shadow:0 2px 2px rgba(255,255,255, 0.7);
  111. }
  112. #nav2 ul ul {
  113.     left:160px;
  114.     top:0px;
  115. }


este es el codigo html
Código HTML:
Ver original
  1. <div class="example">
  2.       <ul id="nav2">
  3.         <!--segundo panel-->
  4.         <li><a href="administrador.php">&nbsp; Inicio &nbsp;<img src="imagenes/separador.png" width="1" height="20" /></a>
  5.          
  6.           </li>
  7.        
  8.         <li><a href="crear_curso.html">
  9.           &nbsp;Administrar Perfil &nbsp;<img src="imagenes/separador.png" width="1" height="20" /></a>
  10.           <ul>
  11.             <li><a href="http://www.script-tutorials.com/category/resources/">&nbsp;Ver Perfil</a>
  12.              
  13.               </li>
  14.            
  15.            
  16.             <!--primer panel-->
  17.             </ul>
  18.           </li>    
  19.         <!--primer panel-->
  20.         <li><a href="#">&nbsp; Mensajes &nbsp;<img src="imagenes/separador.png" width="1" height="20" /></a>
  21.           <ul>
  22.                           <li><a href="http://www.script-tutorials.com/category/resources/">&nbsp;Mensajes Generales</a>
  23.                                 <ul>
  24.                                          <li><a href="http://www.script-tutorials.com/category/php/">&nbsp;<font color="#FF0000">(7)</font>&nbsp;(MSJ) del supervisor</a></li>
  25.                                          <li><a href="http://www.script-tutorials.com/category/mysql/">&nbsp;<font color="#FF0000">(7)</font>&nbsp;(MSJ) del administrador</a></li>
  26.                                          <li><a href="http://www.script-tutorials.com/category/xslt/">&nbsp;<font color="#FF0000">(7)</font>&nbsp;(MSJ) de otros usuarios</a></li>
  27.                                          
  28.                                      </ul>
  29.                             </li>
  30.                               <li><a href="http://www.script-tutorials.com/category/resources/">&nbsp;Avisos</a>
  31.                                         <ul>
  32.                                              <li><a href="http://www.script-tutorials.com/tag/captcha/">&nbsp;<font color="#FF0000">(7)</font>&nbsp;Obras como Favoritas</a></li>
  33.                                             <li><a href="http://www.script-tutorials.com/tag/gallery/">&nbsp;<font color="#FF0000">(7)</font>&nbsp;Comentarios</a></li>
  34.                                             <li><a href="http://www.script-tutorials.com/tag/animation/">&nbsp;<font color="#FF0000">(7)</font>&nbsp;Invitacion de Grupo</a></li>
  35.                                         </ul>
  36.                                 </li>
  37.            
  38.             <!--primer panel-->
  39.                  </ul>
  40.             </li>        
  41.          
  42.          
  43.          
  44.          
  45.          
  46.          
  47.          
  48.          
  49.          
  50.          
  51.          
  52.        
  53.        
  54.        
  55.         <li ><a href="#"> &nbsp; Favoritos:  &nbsp;<img src="imagenes/separador.png" width="1" height="20" /></a>
  56.           <ul>
  57.             <li><a href="ayuda/bases_legales.html" target="_blank" onClick="window.open(this.href, this.target, 'width=391,height=491,location=no'); return false;" >&nbsp;General</a></li>
  58.             <li><a href="ayuda/bases_legales.html" target="_blank" onClick="window.open(this.href, this.target, 'width=391,height=491,location=no'); return false;" >&nbsp;Bases legales</a>
  59.              
  60.             </ul>
  61.           </li>
  62.          
  63.           <li><a href="php/backup.php">&nbsp; Respaldo de BD &nbsp;<img src="imagenes/separador.png" width="1" height="20" /></a>
  64.          
  65.           </li>
  66.         <!--segundo panel-->
  67.        
  68.        
  69.        
  70.        
  71.        
  72.        
  73.        
  74.        
  75.        
  76.        
  77.         </ul>
  78.       </div>
  79.    
  80.    
  81.    
  82.    
  83.    
  84.    
  85.     <!--menu desplegable-->
como quiero implementarlo en un menu vertical en ves de horizontal , entoncs no quiero que aparezca justo debajo . si no mas a la derecha..muchas gracias, espero me ayuden
  #2 (permalink)  
Antiguo 12/01/2013, 13:34
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: mover menú desplegable

En principio viendo el código por encima puedes ajustarlo usando top y right/left.
  #3 (permalink)  
Antiguo 19/01/2013, 11:06
 
Fecha de Ingreso: septiembre-2012
Mensajes: 73
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: mover menú desplegable

muchas gracias por la respuesta, aunque no comprendo muy bien. no c donde aplicarlo.

Etiquetas: listas, margin, menu+deplegable, menus
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 08:28.