✔ Frage zur Dropdown-Menü-Erweiterung

[waswiewo]

Hallo Community,

wie kann ich bei diesem meinem Dorpdown-menu einstellen, dass es sich beim submenu.level3 zur Seite öffnet? bzw: was gebe ich anstelle von "display: block;" ein?

div#nav
{
	float: left;

}

div#nav ul
{
	margin: 0;
	padding: 0;
}

div#nav li
{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

div#nav li a
{
	display: block;
	text-decoration: none;
/*	width: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;*/

}

div#nav>ul a
{
	width: auto;
}

div#nav ul ul
{
  	position: absolute;
	top: 39px;
	display: none;
}


div#nav ul.level1 li.submenu:hover ul.level2
{
	display: block;
}

div#nav ul.level2 li.submenu:hover ul.level3
{
	display: block;
}


img 
{ 
border:0px solid;
}

schonmal Danke im vorraus

mfg

 

[Maik]

Hi,

in diesen Dropdown-Menüs wird es mit einer absoluten Positionierung realisiert:

• http://www.cssplay.co.uk/menus/drop_fly.html
• http://www.cssplay.co.uk/menus/dd_valid.html

 

[waswiewo]

Ahh cool, danke genau das brauchte ich... muss ich mich nurmal duch den quellcode prügeln...

 

[waswiewo]

Ich habe das Dropdownmenu zur seite noch nicht integriert, aber es besteht jetzt schon ein problem =(

Hier der Link

Irgend etwas ist mit meinem Dropdown nicht in ordnung... kann es daran liegen, dass ich teilweise die bilder hintergrund vom td habe und teilweise als img-tag im td?

 

[Maik]

Hi,

und was ist deiner Meinung nach nicht in Ordnung? Ich kann nämlich keine Auffälligkeiten oder Darstellungsunterschiede in den gängigen Browsern ausmachen.

 

[waswiewo]

Ich fasse es nicht... muss damit zusammen hängen,dass der ff die bilder im cache oder so speichert, nach nem rechnernsustart gings bei mir auch!

 

[waswiewo]

Hallo, ich bins nochmal

und zwar bin ich immer noch bei dem Problem mit der Menuerweiterung...

Habe im html nun das hier:

<div id="nav">
<ul class="level1">

	<li class="submenu"><img src="Bilder/1_03.png" name="nav1" onmouseover="this.src='Bilder/nav1_03.png'" onmouseout="this.src='Bilder/1_03.png'">
		<ul class="level2">
			<li><a class="navi" href="#"><img src="Bilder/nav1_07.png" onmouseover="this.src='Bilder/nav1o_07.png';nav1.src='Bilder/nav1_03.png'" onmouseout="this.src='Bilder/nav1_07.png';nav1.src='Bilder/1_03.png'"></a></li>
			<li><a class="navi" href="#"><img src="Bilder/nav1_09.png" onmouseover="this.src='Bilder/nav1o_09.png';nav1.src='Bilder/nav1_03.png'" onmouseout="this.src='Bilder/nav1_09.png';nav1.src='Bilder/1_03.png'"></a></li>
			<li><a class="navi" href="#"><img src="Bilder/nav1_11.png" onmouseover="this.src='Bilder/nav1o_11.png';nav1.src='Bilder/nav1_03.png'" onmouseout="this.src='Bilder/nav1_11.png';nav1.src='Bilder/1_03.png'"></a></li>
			<li><img src="Bilder/nav1_13.png" onmouseover="nav1.src='Bilder/nav1_03.png'" onmouseout="nav1.src='Bilder/1_03.png'"></a></li>
		</ul>
	</li>

	<li><img src="Bilder/1_04.png">
	</li>

	<li class="submenu"><img src="Bilder/1_05.png" name="nav2" onmouseover="this.src='Bilder/nav2_05.png'" onmouseout="this.src='Bilder/1_05.png'">
		<ul class="level2">
			<li><a class="navi" href="#"><img src="Bilder/nav2_08.png" onmouseover="this.src='Bilder/nav2o_08.png';nav2.src='Bilder/nav2_05.png'" onmouseout="this.src='Bilder/nav2_08.png';nav2.src='Bilder/1_05.png'"></a></li>

				<ul class="level3">
					<li><img src="menulvl3news.png"></li>					
					<li><img src="#">Bild als hintergrund, darumer irgendwas...
				</ul>

			<li><a class="navi" href="#"><img src="Bilder/nav2_10.png" onmouseover="this.src='Bilder/nav2o_10.png';nav2.src='Bilder/nav2_05.png'" onmouseout="this.src='Bilder/nav2_10.png';nav2.src='Bilder/1_05.png'"></a></li>

				<ul class="level3">
					<li><img src="menulvl3links.png"></li>					
					<li><img src="#">Bild als hintergrund, darumer irgendwas...
				</ul>

			<li><a class="navi" href="#"><img src="Bilder/nav2_12.png" onmouseover="this.src='Bilder/nav2o_12.png';nav2.src='Bilder/nav2_05.png'" onmouseout="this.src='Bilder/nav2_12.png';nav2.src='/Bilder/1_05.png'"></a></li>

				<ul class="level3">
					<li><img src="menulvl3forum.png"></li>					
					<li><img src="#">Bild als hintergrund, darumer irgendwas...
				</ul>

			<li><a class="navi" href="#"><img src="Bilder/nav2_14.png" onmouseover="this.src='Bilder/nav2o_14.png';nav2.src='Bilder/nav2_05.png'" onmouseout="this.src='Bilder/nav2_14.png';nav2.src='Bilder/1_05.png'"></a></li>
				<ul class="level3">
					<li><img src="menulvl3vote.png"></li>					
					<li><img src="#">Bild als hintergrund, darumer irgendwas...
				</ul>

			<li><a class="navi" href="#"><img src="Bilder/nav2_16.png" onmouseover="this.src='Bilder/nav2o_16.png';nav2.src='Bilder/nav2_05.png'" onmouseout="this.src='Bilder/nav2_16.png';nav2.src='Bilder/1_05.png'"></a></li>
			<li><img src="Bilder/nav2_17.png" onmouseover="nav2.src='Bilder/nav2_05.png'" onmouseout="nav2.src='Bilder/1_05.png'"></a></li>
		</ul>
	</li>

</ul>
</div>

und in der css ganz unten die erweiterung:

div#nav
{
	float: left;
        position:relative;
}

div#nav ul
{
	margin: 0;
	padding: 0;
}

div#nav li
{
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}

div#nav li a
{
	display: block;
	text-decoration: none;
/*	width: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;*/

}

div#nav>ul a
{
	width: auto;
}

div#nav ul ul
{
  	position: absolute;
	top: 18px;
	display: none;
}


div#nav ul.level1 li.submenu:hover ul.level2
{
	display: block;
}

div#nav ul.level2 li.submenu:hover ul.level3
{
	display: block;
}

div#nav ul.level2
{
	top: 1.5em;
	left: -1px;
}

div#nav ul.level3
{
	top: -1px;
	left: 7em;
	border-top: 1px solid #CCC;
}

img 
{ 
border:0px solid;
display:block;
}

Aber irgendwie wird das lvl3-menu nicht angezeigt, dabei sollte es rechts auftauchen...

EDIT: Habs selbst herausgefunden, hatte die classe falsch vergeben und ausversehen nen teil der css-datei gelöscht...