✔ Problem mit DropDown Menü

[DerGraf87]

Ahoi,

ich hatte vor, auch wenn die Meinungen darüber gespalten sind, meine Website mit einem javascript Drop Down Menü auszustatten.
Hier erstmal der Screen zu meinem problem:
http://www.die-verdammnis.de/screen.JPG

Wie man sieht, fährt die Maus über "Profil", weshalb das Menü ausgeklappt wird...
Mein Problem ist allerdings, dass die Zeilen "Dein Profil" und "Profil ändern" so weit eingeengt werden, wie Profil ist, d.h. sie gehen über mehrere Zeilen
Wenn ich im Quellcode dann die width vom Profil ändere, dann funktioniert es. Problem: es entstehen zwischen Home - Profil - Logout riesige freie Flächen, wie auf folgendem Screen zu sehen:
http://www.die-verdammnis.de/screen2.jpg

Weiß da jmd. eine Lösung?

Hier der Quellcode:
von css datei:

#nav, #nav ul { /* all lists */
	padding: 2;
	margin: 1;
	list-style: none;
	line-height: 1;
}
#nav a {
	display: block;
}
#nav li { /* all list items */
	float: left;
	position: relative;
	width: 100px; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
	text-align: center;
	line-height: 17px;
	border: 1px solid black;
	position: absolute;
	background: #C9D8C3;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

vom header abschnitt:

<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>

hoffentlich weiß jmd. Rat
Und hoffentlich sind da nicht allzu peinliche Fehler drin...
Mfg,
Tommy

 

[Maik]

Die Lösung wird wohl im CSS-Code zu suchen sein ..., daher kommt der Thread ins CSS-Forum.

 

[Maik]

Es könnte eine weitere Regel mit der gewünschten Breite für die Sub-Links notiert werden:

#nav li ul li
{
width: 150px;
}

<ul id="nav">
  <li>item 1
         <ul>
             <li>Dein Profil</li>
             <li>Profil ändern</li>
         </ul>
  </li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Anmerkung: Werte, die ungleich null sind, müssen eine Einheit erhalten

padding: 2px;
margin: 1px;
list-style: none;
line-height: 1px;

 

[DerGraf87]

Vielen Dank
hat mir sehr geholfen