HTML CSS Menü - 2. Submenü überlappt sich

Razorblade

SNF-Inventarnr. #9356663
Hi!

Ich schaffe es nicht dass das 2. Submenü meines horizontalen Menüs nicht überlappt.
Weiters sollte zwischen dem 1. und 2. Submenü horizontal der gleiche Abstand sein wie vertikal, aber auch das haut nicht hin -.-

Kann mir vielleicht wer sagen was ich da falsch mache?

Code:
<html>
<head>
<title>Testmenu</title>

<style type="text/css">
	body {
		font-size: 14px;
		font-family: Calibri, Tahoma, Arial, sans-serif;
		color: #ffffff;
		background-color: #000e1a;
		margin: 0;
		padding: 0;
	}
	
	#menu {
		text-align: center;
		height: 50px;
		margin: 10px;
		width: 1000px;
		min-width: 1000px;
	}
	
	#menu div {
		clear: left;
	}
	
	#menu ul {
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	#menu ul li {
		list-style: none;
		float: left;
		position: relative;
		margin: 0.4em;
		padding: 0;
		
		border-radius: 10px;
		border: rgba(150, 150, 150, .5) solid 1px;
		border-radius: 7px;
		margin: 5px;
		background-color: #000a12;
		background-color: rgba(0, 10, 18, .5);
	}
	
	#menu ul li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 1.6em;
		left: -0.4em;
		display: none;
	}
	
	#menu ul li:hover ul {
		display: block;
	}
	
	#menu ul li ul li {
		float: none;
		display: block;
		margin-bottom: 0.2em;
	}
	
	#menu ul a,
	#menu span {
		display: block;
		width: 6.4em;
		padding: 0.2em 1em;
		text-decoration: none;
		color: #ffffff;
	}
	
	#menu ul a:hover,
	#menu ul span,
	li a.active,
	#menu ul li ul span {
		border-radius: 7px;
		text-shadow: #9acbff 0px 0px 7px, #9acbff 0px 0px 7px, #9acbff 0px 0px 7px;
	}
	
	#menu ul li ul li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: -1px;
		left: 8.4em;
		display: none;
		margin-right: 0.2em;
	}
	
	#menu ul li ul li ul li {
		margin: 0;
		padding: 0;
		position: absolute;
		display: none;
		
	}
	
	#menu ul li ul li:hover ul li {
		display: block;
		float: left;
		
	}
	

	
	
</style>

</head>

<body>

<div id="menu">
	<ul>
	   <li><a href='#'>Home</a></li>
	   <li class="active has-sub"><a href='#'>Products</a>
		  <ul>
			 <li class="has-sub"><a href='#'>Product 1</a>
				<ul>
				   <li><a href='#'>Sub Product 1</a></li>
				   <li><a href='#'>Sub Product 2</a></li>
				</ul>
			 </li>
			 <li><a href='#'>Product 2</a>
				<ul>
				   <li><a href='#'>Sub Product 3</a></li>
				   <li><a href='#'>Sub Product 4</a></li>
				</ul>
			 </li>
			 <li><a href='#'>Product 3</a></li>
		  </ul>
	   </li>
	   <li><a href='#'>About</a></li>
	   <li><a href='#'>Contact</a></li>
	</ul>
</div>

</body>
</html>


Danke im Voraus :)
RB
 
Hi, da noch keine antwort eingegangen ist, konntest du das Problem mittlerweile schon lösen. :)
 
Was das Menü angeht, nein. Die Chefetage hat sich für ein anderes Design entschieden dass durch einen Generator leicht designen lies...
 
Warum nicht gleich so? ;)
Solche Programme oder Online-Generatoren gab es auch schon vor einem Jahr. Stattdessen gibt es immer einen Doofen, den man zuerst "kostenlos" bemüht ;)

In einem Jahr dürfte sich einiges an Javascript und CSS geändert haben, als dass man immer nachbessern sollte - und das geht nun mal einfacher mit Programm/online. Beim Programm hat man den Vorteil, das Projekt abzuspeichern und somit einen Funktionsbestand/-archiv über die Zeit zu erstellen. Gleichzeitig können auch diverse Browser berücksichtigt werden, allein der massive Unterschied der Interpretation von CSS im IE und Firefox sind erheblich.

Vor einem Jahr habe ich eine Frage nicht gesehen, sorry. Sonst hätte ich dir gleich ganz abgeraten von deinem Vorhaben.

MfG
 
Oben