No puedo mostrar un menu activo

moisesneveu · #1 (**permalink**) 05/01/2012, 00:39

Como están estimado foreros...
estoy luchando desde hace rato con un menú... lo que pasa es que no puedo hacer que al marcar un submenú este quede marcado como activado me la ganó, intenté de varias formas pero no me puede funcionar... me podrían ayudar por favor??

les dejo a continuación todo el código en una página... además si lo quieren probar necesitarán este archivo hmenu.js

Desde ya muchas gracias a todos!! (se ve largo pero es cortito..)

Código HTML:

<head>
<title>menu</title>
<script type="text/javascript" src="hmenu.js"></script>
<style type="text/css">
<!--

body {
background-color:#CCFFFF;
}
.hidden {display: none }

#double_menu {
	position: relative;
	width: 100%; 
	height: 74px;
	background: #0a0809 url('images/bg-menu.png') left top repeat-x;
	color: #fff;
}
/*estilos superior*/
.first_menu a { display: block;	color: #1F6FAE;text-decoration: none; text-decoration: none;padding: 8px 10px 12px 10px;width: 120px;font-family: Verdana;font-size: 14px;font-weight: bold;text-align: center;}

#double_menu .first_menu a:hover { color: #A5DEFC;}

.first_menu li, .second_menu li { float: left;}

.first_menu li span a.select:link, .first_menu li span a.select:hover, .first_menu li span a.select:visited{background-image:url(images/left-button.png); background-position:top left; background-repeat:no-repeat;color: #fff;
}

/*estilos inferior... (aqui esta el problema, no puedo dejar marcado con algún color diferente el menu seleccionado.*/
.second_menu a { color:#A5DEFC; font-size:11px; width: 80px;text-decoration: none; padding: 6px 20px;font-weight: bold;text-align: center; text-transform:uppercase;}

#double_menu .first_menu a:hover { color: #ffffff;}
#double_menu .first_menu .sel a:link { color: #ff2222;}



.first_menu,
.second_menu {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
}

.first_menu {
	top: 0;
	left: 0;
	width: 100%;
}

.second_menu {
	top: 3;
	left: 0;
	width: 100%;
	/* min-height:3em;
	_height:3em; */ /* IE 6 hack */
}


-->
</style>
</head>

<body>
<div id="menu">
			<div id="double_menu">
				<ul class="first_menu">
                	<li>
						<span><a href="#" class=" select">Empresas</a></span>
						<ul class="second_menu hidden" style="width: 100%; ">
							<li><span><a href="#">mias</a></span></li>
							<li><span><a href="#">varias</a></span></li>
						</ul>
					</li>
					
					<li>
						<span><a href="#" class="">Otros</a></span>
						<ul class="second_menu hidden" style="width: 100%; ">
							<li><span><a class="sel" href="#">otros1</a></span></li>
							<li><span><a class="sel" href="#">otros2</a></span></li>
						</ul>
					</li>
                    
				</ul>
	</div>
</div>



</body>
</html>