Menu Vertical desplegable con CSS

luis192 · #1 (**permalink**) 18/05/2011, 10:33

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>

seoista · #2 (**permalink**) 19/05/2011, 00:33

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

Saludos.