Menú desplegable

triskell · #1 (**permalink**) 21/07/2009, 02:37

Tengo realizado un menú desplegable con css y xhtml y quiero que al pinchar en el menú que se desplega se quedwe activo, los códigosd son:

Código del head con los estilos:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="conexión a xhtml" xml:lang="en">
<head runat="server">
    <title>CVT :: Mantenimiento Informático Bizkaia :: Zona Corporativa</title>
    <link href="style/master.css" rel="stylesheet" type="text/css" />
	<style type="text/css">

.pro_linedrop {
height:36px;
width:778px;
background:url(../images/menu_sup_01.gif);
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:12px;
z-index:500;
}

.pro_linedrop .select {
margin:0; 
padding:0; 
list-style:none; 
white-space:nowrap;
}

.pro_linedrop .sub {
margin:0; 
padding:0; 
white-space:nowarp;
}

.pro_linedrop li {
float:left;
background:url(../images/menu_sup_01.gif);
}

.pro_linedrop .select a {
display:block; 
height:36px; 
float:left;
padding:0 0 0 15px; 
text-decoration:none; 
line-height:35px; 
white-space:nowrap; 
color:#ffffff;
}

.pro_linedrop .select li.line a {color:#ffffff;}

.pro_linedrop .select a b {
display:block; 
padding:0 5px 10px 15px; 
}

.pro_linedrop .select a:hover, 
.pro_linedrop .select li:hover a {
padding:0 0 0 15px;
line-height:35px;
cursor:pointer; 
color:#f20060;
}

.pro_linedrop .select li.line a:hover, 
.pro_linedrop .select li.line:hover a {
color:#a9aaaa;}

.pro_linedrop .select li.line3 a:hover, 
.pro_linedrop .select li.line3:hover a {
color:#27e8f9;}

.pro_linedrop .select li.line2 a:hover, 
.pro_linedrop .select li.line2:hover a {
color:#00ff00;}

.pro_linedrop .select a:hover b, 
.pro_linedrop .select li:hover a b {
display:block; 
padding:0px 5px 9px 15px; 
cursor:pointer;
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.pro_linedrop .sub {
margin:0; 
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:25px;
display:block; 
position:absolute;
float:left;
width:778px;
top:30px; 
left:0; 
text-align:center;
background:transparent url(../line/transparent.gif);
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a 
{display:block; height:25px; line-height:25px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#000000;font-size:10px;}

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#002f8e; line-height:25px; position:relative;}

.pro_linedrop .select :hover .sub li:hover > a {color:#002f8e;}

.pro_linedrop .select :hover .sub :hover ul {padding:0; margin:0; list-style:none; display:block; width:112px; position:absolute; left:-1px; top:25px; border:1px solid #aaa; border-top:0; background:#fff;}

.pro_linedrop .select :hover .sub :hover ul li a {width:80px; text-align:left; height:20px; line-height:18px;}
.pro_linedrop .select :hover .sub :hover ul li a:hover {line-height:16px;}

</style>
</head>

Código del menú con sus capas:

Código:

<div class="pro_linedrop">
		<ul class="select">
		<li><a href="/"><b>Inicio</b></a></li>
		<li class="line2"><a href="#nogo"><b>Telefon&iacute;a</b></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="sub">
				<li><a href="iphone.aspx">iPhone 3GS</a>
				</li>
				<li><a href="portabilidad.aspx">Portabilidad y Contrato</a>
				</li>
				<li><a href="terminales.aspx">Prepago</a></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="line3"><a href="contactar.aspx"><b>Solicitar Informaci&oacute;n </b></a>
		</li>
		<li class="line"><a href="va al foro"><b>Foro</b></a>
		</li>
		<li class="line"><a href="va la tienda on line"><b>Tienda Online</b></a>
		</li>
		</ul>
	</div>

Mi idea es que al pinchar sobre la sección Telefonía que es la que tiene el menú desplegable este se quede visible con sus tres opciones.

kseso? · #2 (**permalink**) 21/07/2009, 05:46

a la clase que controla esa lista y que ahora visualizarás con :hover, tendrás que añadir el :active" (y ":focus") para que se mantenga visible. Con css eso será temporal, hasta que hagas clic en otro punto que se ocultará de nuevo.

Por cierto, las pseudoclases (:link, :visisted, :hover, :active) se escriben sin espacio en blanco que las separe del elemento al que la aplicas.

Un saludo