como eliminar una herencia css

charlyta · #1 (**permalink**) 19/09/2009, 12:08

Hola tengo este menu y desearia eliminar las propiedades heredadas en los submenus (sobretodo la imagen de lista). me echáis una mano? Gracias!

el codigo:

Código HTML:

<head>
	<title>Menú usando listas</title>

	
	<script language="Javascript">
	<!--
	function toggle(id) {
		obj = document.getElementById(id);
		if (obj.style.display == "") {
			obj.style.display = "none"
		}
		else {
			obj.style.display = ""
		}
	}
	-->
	</script>
    <style>
	#contenedor	{

	width: 10em;
	padding: 0em 0em 1em 0em;
	
	color: black;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;FONT-SIZE: 1.08em;LINE-HEIGHT: 1.53em;
}

.menu	{
	list-style: none;
	list-style-position: outside;
	padding: 0;
	margin: 0;
}


.menu li.sel a	{
	width: 100%;
	text-decoration: none;
	background:url(square_bullet.gif) no-repeat left center;	
	color: #d0431d;FONT-SIZE: 1.08em;
	padding-left: 0.5em;
	
}

.menu li > a	{
	width: auto;
	display: block;	/* Para Mozilla */
}

.menu li a:hover, .menu li.seleccionado a	{
	COLOR: #666;FONT-SIZE: 1.08em;background:url(square_bullet.gif) no-repeat left center;text-decoration: none;padding-left: 0.5em;
	
}
.menu li.sub a{ COLOR: #666;FONT-SIZE: 1.08em;list-style: none;}
.submenu	{
	list-style: none;
	list-style-position: outside;
	padding-left: 0.5em;
	margin-left: 0.5em;
}

    </style>
</head>
<body>

<div id="contenedor">
	<ul class="menu">
		<li class="sel"><a href="#" onClick="javascript:toggle('uno'); return false;">Uno</a></li>
		<ul id="uno" class="submenu" style="display: none">
			<li class="sub"><a href="#">Uno Punto Uno</a></li>
			<li class="sub"><a href="#">Uno Punto Dos</a></li>
			<li class="sub"><a href="#">Uno Punto Tres</a></li>
		</ul>
		<li class="seleccionado"><a href="#">Dos</a></li>
		<li class="sel"><a href="#">Tres</a></li>
		<li class="sel"><a href="#">Cuatro</a></li>
		<li class="sel"><a href="#" onClick="javascript:toggle('cinco')">Cinco</a></li>
		<ul id="cinco" class="submenu" style="display: none">
			<li class="sub"><a href="#">Cinco Punto Uno</a></li>
			<li class="sub"><a href="#">Cinco Punto Dos</a></li>
			<li class="sub"><a href="#">Cinco Punto Tres</a></li>
		</ul>
		<li class="sel"><a href="#">Seis</a></li>
	</ul>
</div>

charlyta · #2 (**permalink**) 19/09/2009, 13:24

Solucionado. Si alguin desea un menu css con javascript vertical y desplegable...