Problema com Menu / CSS

Estou tento problemas com um menu dropdown que estou tentando utilizar.

Não entendo muito de css e estou precisando de ajuda. O código completo da página (incluindo JavaScript, Style e HTML) é o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Menu</title>

<style type="text/css">
	/* Fix IE. Hide from IE Mac */
	* html ul li { 
		float: left; 
		height: 1%; 
	}
	
	* html ul li a { 
		height: 1%; 
	}
	/* End */

	#nav a {
		display: block;
		text-decoration: none;
		color: #777;
		background: #fff;  /*IE6 Bug */
		padding: 5px;
		border: 1px solid #ccc;  /*IE6 Bug */
		border-bottom: 0;
	}

	#nav a:hover { 
		color: #E2144A; 
		background: #f9f9f9; 
	} 

	#nav a.daddy {
		background: url(rightarrow.gif) center right no-repeat;
	}

	#nav, #nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		width: 150px; /* Width of Menu Items */
		border-bottom: 1px solid #ccc;
	}
	
	#nav ul li {
		position: relative;
	}
	
	#nav li ul {
		position: absolute;
		left: 150px;
		top: 0px;
		display: none;
	}
	
	#nav li {
		float: left;
		width: 150px;
	}
	
	#nav li li {
		width: 150px;
	}
	
	#nav li ul a {
		width: 150px;
	}
	
	#nav li ul ul {
		margin: 0 0 0 0px;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		display: none;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
		display: block;
	}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>


	</head>

	<body>
		<ul id="nav"> 
			<li><a href="#">menu 1 (+)</a>
				<ul>
					<li><a href="#" class="daddy">menu 1.1 (+)</a>
						<ul>
							<li><a href="#" class="daddy">menu 1.1.1 (+)</a>
								<ul>
									<li><a href="#">menu 1.1.1.1</a></li>
									<li><a href="#">menu 1.1.1.2</a></li>
								</ul>
							</li>
							<li><a href="#" class="daddy">menu 1.1.2 (+)</a>
								<ul>
									<li><a href="#">menu 1.1.2.1</a></li>
								</ul>
							</li>
							<li><a href="#" class="daddy">menu 1.1.3 (+)</a>
								<ul>
									<li><a href="#">menu 1.1.3.1</a></li>
									<li><a href="#">menu 1.1.3.2</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#" class="daddy">menu 1.2 (+)</a>
						<ul>
							<li><a href="#">menu 1.2.1</a></li>
							<li><a href="#">menu 1.2.2</a></li>
							<li><a href="#">menu 1.2.3</a></li>
						</ul>
					</li>
				</ul>
			</li>

			<li><a href="#">menu 2 (+)</a>
				<ul>
					<li><a href="#" class="daddy">menu 2.1 (+)</a>
						<ul>
							<li><a href="#">menu 2.1.1</a></li>
							<li><a href="#">menu 2.1.2</a></li>
						</ul>
					</li>
					<li><a href="#" class="daddy">menu 2.2 (+)</a>
						<ul>
							<li><a href="#">menu 2.2.1</a></li>
							<li><a href="#">menu 2.2.2</a></li>
							<li><a href="#">menu 2.2.3</a></li>
						</ul>
					</li>
					<li><a href="#">menu 2.3</a></li>
					<li><a href="#">menu 2.4</a></li>
				</ul>
			</li>

			<li><a href="#">menu 3 (+)</a>
				<ul>
					<li><a href="#">menu 3.1</a></li>
					<li><a href="#">menu 3.2</a></li>
					<li><a href="#">menu 3.3</a></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

O problema é, ao abrir esta página, quando paro o mouse sobre qualquer item do primeiro menu (menu 1, 2 ou 3), os submenus (menu 1.1, 1.2...) são mostrados com top = 0, já os menus seguintes (1.1.1, 1.1.2...), aparecem com o top correto (ao lado do menu q o "chamou").

Sei que no código indiquei top=0, porém se tiro essa declaração, todo o resto do menu fica "desordenado".

Já consegui arrumar o css...

ficou assim:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
}

li {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
}

ul li {
	position: relative;
}


li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
}


/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;  /*IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;  /*IE6 Bug */
	border-bottom: 0;
}


/* Fix IE. Hide from IE Mac */
* html ul li { 
	float: left; 
	height: 1%; 
}


* html ul li a { 
	height: 1%; 
}
/* End */


/* Sub Menu Styles */	
/*
li ul li a { 
	padding: 2px 5px; 
} 
*/


/* Hover Styles */
ul li a:hover { 
	color: #E2144A; 
	background: #f9f9f9; 
} 


/* The magic */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	display: none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
	display: block; 
}

NOTA: o restante do código não foi alterado!

1 Resposta

Topicos relacionados