Tema: mover menú desplegable
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/01/2013, 13:02
jjeshuacm1
 
Fecha de Ingreso: septiembre-2012
Mensajes: 73
Antigüedad: 12 años, 2 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