Foros del Web » Creando para Internet » CSS »

Menu Vertical desplegable con CSS

Estas en el tema de Menu Vertical desplegable con CSS en el foro de CSS en Foros del Web. Hola amigos, tengo una duda, yo recién me inicio con CSS y estaba haciendo un menú desplegable y la verdad no deseo usar JavaScript porque ...
  #1 (permalink)  
Antiguo 18/05/2011, 11:33
 
Fecha de Ingreso: marzo-2009
Mensajes: 9
Antigüedad: 8 años, 8 meses
Puntos: 0
Pregunta Menu Vertical desplegable con CSS

Hola amigos,

tengo una duda, yo recién me inicio con CSS y estaba haciendo un menú desplegable y la verdad no deseo usar JavaScript porque lo que hago es para maquetar una pagina y me pidieron no hacerlo.

Bueno he logrado desplegar una pestaña usando solo CSS , y lo que se despliega es un inicio de sesión, pero cuando le doy clic en el textbox de usuario se cierra la pestaña desplegada , mi pregunta es como puedo hacer para que no se cierre solo usando hojas de estilo

Tambien ayudenme porque solo me funciona en IE :( y no se porque y tambien quiero que se cierre dandole click en el mismo boton con el cual abri la pestana

Solo usando CSS. Graciassss

PDTA: les pongo mi codigo

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
    <head>
        <title>SAER</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
     <style type="text/css">
/*HOJA DE ESTILOS!!!*/
html, body{
    background: #E8E8E8;
    width: 100%;
    height: 100%;
}

body{
    display: block;
    text-align: center;
}

#contenedor{
    height: auto;
    margin: 0 auto 0 auto;
    width: 950px;
    padding: 0;
    text-align: left;
}

#header{
    height: 230px;
    background: url("images/header_pag2.png");
    clear: both;
    margin: 0 auto 0 auto;
    padding: 5px;
}

#drop-login{
	background:url(images/boton-login.png) no-repeat;
	color:#CCC;
	border:none;
	float:right;
	cursor: pointer;
	display:block;
	font-family: Tahoma;
	margin-right:5px;
	margin-top: 5px;
	font-size:13px;
	height: 35px;
	width: 150px;
	padding:5px 0 0 15px;
}

#drop-login ul li{ 
	display:none;
	float:right;
	cursor:default;
	list-style-type: none;
	text-decoration:none;
	position:relative;
	margin-right:-5px;
	padding:10px;
	font-size:13px;
	font-family:Tahoma, Geneva, sans-serif;
	width:291px;
	height:160px;
	border:none;
}

.plus {
  display: inline-block;
  font-family: Georgia;
  font-size: 13px;
  font-weight: bold;
  margin-right: 10px;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
}

/*ROTAR EL SIGNO + */
#drop-login:hover .plus{
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);	
}/* FIN DE ROTAR EL SIGNO +*/

#drop-login:focus ul li, #drop-login:active ul li{
	display: inline-block;
	background:url(images/log-in.png) no-repeat;
}

#drop-login:focus{
	background:url(images/boton3.png) no-repeat;
	color:#333;	
}

#content-login{
	padding-top:5px;
	line-height:20px;
	padding-left:15px;
}

#textbox{
	display:block;
	width:200px;
	height:25px;
	margin: 5px 5px 8px 8px;
	background:url(images/textbox.png) no-repeat;	
}

#contenido{
    height: 100%;
    padding: 5px;
}

#contenedor_contenido{
    height: 80%;
    width: 80%;
    margin: 50px;
    clear: both;
}

#footer{
    background-color: gainsboro;
    height: 100px;
    clear: both;
    padding: 5px;
}
     </style>
    </head>
<body>
    <div id="contenedor">
      <div id="header">HEADER
      	<div id="drop-login">
        	<span class="plus">+</span>Inicio de sesion
                	<ul>
                    	<li><div id="content-login">
                        Login:
                        <ul id="textbox"><input name="" type="text" /> </ul>
                        Password:
                        <ul id="textbox"></ul>
                        </div>
                        </li>
                    </ul>                   
          </div>
        </div>
        <div id="contenido">
            <div id="contenedor_contenido">
              <p>hola</p>
              <p>1</p>
              <p>2</p>
              <p>&nbsp;</p>
              <p>3</p>
              <p>3</p>
              <p>23</p>
              <p>23</p>
              <p>2</p>
              <p>3</p>
            </div>
        </div>
        <div id="footer">hola</div>
    </div>
</body>
</html> 
  #2 (permalink)  
Antiguo 19/05/2011, 01:33
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Menu Vertical desplegable con CSS

Aquí tienes varios MENÚS DESPLEGABLES 100% CSS. Adáptalo a tu página.

Saludos.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·

Etiquetas: desplegable, 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:10.