Foros del Web » Creando para Internet » CSS »

Menu vertical

Estas en el tema de Menu vertical en el foro de CSS en Foros del Web. hola amigos, tengo el siguiente codigo: <div id="menuLeft"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Intendencia</a></li> <li><a href="#">Gobierno</a></li> <li><a href="#">Tramites</a></li> <li><a href="#">Turismo</a></li> <li><a href="#">Como llegar</a></li> <li><a href="#">Noticias</a></li> <li><a ...
  #1 (permalink)  
Antiguo 17/12/2010, 15:33
Avatar de juanleonardo  
Fecha de Ingreso: agosto-2007
Mensajes: 382
Antigüedad: 10 años, 4 meses
Puntos: 0
Menu vertical

hola amigos, tengo el siguiente codigo:
<div id="menuLeft">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Intendencia</a></li>
<li><a href="#">Gobierno</a></li>
<li><a href="#">Tramites</a></li>
<li><a href="#">Turismo</a></li>
<li><a href="#">Como llegar</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
y tengo el siguiente codigo css:
#menuLeft {
position:absolute;
left:0px;
top:-2px;
width:100%;
height:217px;
z-index:2;
background: #706f6d;
}
#menuLeft ul{
list-style: none;
line-height: normal;
margin: 0;
padding: 19px 0 0 0;
}
#menuLeft li{
padding: 0px 0px 5px 0px;
z-index: 2;
}
#menuLeft li a:link, a:visited{
text-decoration: none;
color: #FFFFFF;
}
#menuLeft li a:hover {
text-align: right;
color: #7ea647;
background: #9dfc24;
padding: 0 40px 0 0;
width:217px;
}
lo que quiero hacer y no consigo es q al posicionarme en alguno de los enlaces se ponga un recuadro de un color q tenga el ancho de menu left y ademas que se alinie a la derecha. me podrian decir q estoy haciendo mal. saludos y gracias
  #2 (permalink)  
Antiguo 17/12/2010, 16:18
 
Fecha de Ingreso: diciembre-2010
Mensajes: 32
Antigüedad: 7 años
Puntos: 0
Respuesta: Menu vertical

#menuLeft ul{
list-style: none;
line-height: normal;
margin: 0;
padding: 19px 0 0 0;
display: table-row;
}
  #3 (permalink)  
Antiguo 17/12/2010, 16:31
Avatar de juanleonardo  
Fecha de Ingreso: agosto-2007
Mensajes: 382
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Menu vertical

Gracias Tsugoi pero no me funciono solo lo levanto un poco hacia arriba
Q puede ser?
  #4 (permalink)  
Antiguo 17/12/2010, 16:56
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Menu vertical

preuba con

#menuLeft li a:link, a:visited{
text-decoration: none;
color: #FFFFFF;
display:block;
}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 17/12/2010, 17:09
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Respuesta: Menu vertical

Hola, no se si he entendido bien del todo lo que necesitas, puedes probar esto:

Código CSS:
Ver original
  1. #menuLeft li a:hover {
  2. text-align: right;
  3. color: #7ea647;
  4. background: #9dfc24;
  5. width:100%;
  6. display:block;
  7. text-align:right;
  8. }

El ancho vendrá determinado por el ancho que le des a #menuLeft
En cuanto a lo de alinear a la derecha no me ha quedado claro si te refieres al texto o a los li

Saludos
  #6 (permalink)  
Antiguo 17/12/2010, 21:53
 
Fecha de Ingreso: diciembre-2010
Mensajes: 32
Antigüedad: 7 años
Puntos: 0
Respuesta: Menu vertical

bueno hice este menu no se si es lo que necesitas

Código CSS:
Ver original
  1. div.contenedorlista ul {
  2.     display : table-row;
  3.   }
  4. div.contenedorlista li {
  5.     background-color : #edbe05;
  6.     display : block;
  7.     height : 40px;
  8.     list-style-image : none;
  9.     list-style-type : none;
  10.     margin-bottom : 2px;
  11.     margin-left : 5px;
  12.     text-align : center;
  13.     color: white;
  14.     width : 150px;
  15.   }
  16. div.contenedorlista li:hover {
  17.     background-color : #003;
  18.   }
  19. div.contenedorlista li.current {
  20.     background-color : #FF5500;
  21.   }
  22. div.contenedorlista {
  23.     background-color: #115599;
  24.     width: 160px;
  25.     margin-left: 0px;
  26.   }

Código HTML:
Ver original
  1. <h1>Menu usuario</h1>
  2. <div class="contenedorlista">
  3. <ul>
  4.    <li class="current">Home</li>
  5.    <li> Productos </li>
  6.    <li> Servicios</li>
  7.    <li> Perfil del usuario </li>
  8.  </ul>
  9. </div>

Etiquetas: vertical
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 15:53.