✔ Problem mit DIV-Größenänderung

N

Netzwerkidi

Hallo zusammen,

vielleicht kann mir einer einen Rat geben.

Ich bekomme es in dem Script unten einfach nicht hin, dass der DIV-Background bis Level 3 vom Menü mitzieht. Den 2. Level zeigt er an. Und dann ist Schluss. Habe schon mal ein <HR> nach dem <UL> gehabt, nützt aber nichts.
Und beim IE8 zeigt er Level 3 ("Themes" --> "Joomla" , Rest fehlt...) sogar erst nach Click "Themes" an und dann nur bis das erste, weil der Rest außerhalb des angzeigten DIV-Bereichs liegt.

Vielen Dank schon mal +

Grüße
Idi

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head>
<title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title>

<!-- 
http://www.cafewebmaster.com/dropdown-rollover-menu-pure-css-html
-->

<style type="text/css">
body { padding: 3em; background:#f2f2f2;}

#cssm1  * { padding:0; margin: 0; font: 1em arial; }

#cssm1 { position: absolute;  z-index: 99; margin: 0 auto; float: left; line-height: 20px;   
border: 1px solid gray;


  background: #ff2222; 
  
  -moz-opacity: .9;
  opacity: .9;
    filter: alpha(opacity=90);}

#cssm1 a { display: block;   text-decoration: none; padding: 3px 10px; }

#cssm1 a:hover { color: #789; }


#cssm1 ul li, 
#cssm1 ul li ul li  { width: 120px; list-style-type:none; }

#cssm1 ul li { float: left; width: 120px; }

#cssm1 ul li ul, 
#cssm1 ul li ul, 
#cssm1 ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 120px;

	}

#cssm1 ul, 
#cssm1 ul li:hover ul, 
#cssm1 ul li ul li:hover ul { 
	display:block; 
	}

#cssm1 ul li ul li:hover ul { 
	position: absolute;
	margin-left: 120px;
	margin-top: -30px;
	}




</style>

</head><body>
<div id="cssm1">
	<ul>
		<li><a href="http://www.cafewebmaster.com">Home</a></li>
		<li><a href="#">Design&nbsp;»</a>
				<ul>
				<li><a href="#">Fonts</a></li>				
				<li><a href="#">Graphics</a></li>
				<li><a href="#">Themes&nbsp;»</a>
					<ul>
						<li><a href="#">Joomla</a>
						<li><a href="#">Drupal</a>
						<li><a href="#">Wordpress</a>
					</ul>
				</li>
			</ul>
		
		</li>
		<li><a href="#">Download</a></li>
		<li><a href="#">Menus&nbsp;»</a>
			<ul>
				<li><a href="#">Javascript</a></li>
				<li><a href="#">CSS&nbsp;»</a>
					<ul>
						<li><a href="#">Left Menu</a>
						<li><a href="#">DropDown</a>
						<li><a href="#">...</a>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">...</a></li>
		
	</ul>

</div>
<div>
<h1>CSS DropDown/Rollover Menu without Javascript</h1>
<p>This is a dhtml menu like rollover menus with javascript. Tested with major web-browsers like Mozilla Firefox 3, Microsoft Internet Explorer 8, Opera 9.5, Google Chrome, Apple Safari, ...</p>
</div>
</body></html>

PS: Ich hatte auch mal das hier (http://csscreator.com/tools/multimenu) probiert. Mit dem Background gibt es aber dasselbe Problem.
 
Zuletzt bearbeitet von einem Moderator:
Hai,

die hohe Kunst des Weglassen. Merci!

Vielleicht noch eine Frage: kann man eigentlich die Levels unterhalb der immer sichtbaren Hauptmenüzeile auch so anzeigen, dass entweder immer alle Zweige pro Hauptmenüpunkt komplett angezeigt werden oder eben nur die Hauptzeile? Momentan öffnet das System ja immer erst dann einen Zweig ab Level 3, wenn man mit der Mouse über das darüber liegende Level 2 fährt; die drei Themes-Einträge werden also erst angezeigt, wenn die Maus über Themes fährt.

Grüße
Idi
 
Zuletzt bearbeitet von einem Moderator:
Moin,

dazu musst du

Code: 
#cssm1 ul li ul, 
#cssm1 ul li ul, 
#cssm1 ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 120px;

	}

mit

Code: 
#cssm1 ul li ul, 
#cssm1 ul li ul {
	display:none;
}

#cssm1 ul li:hover ul li ul{ 
	display:block;
	list-style-type:none; 
	width: 120px;
	margin-left: 120px;
	margin-top: -30px;

	}

ersetzen.

Aber das würde ich nicht machen.. weil angenommen du hast mehrere Einträge in Level 2 die ein Level 3 haben, dann wirds totaler Murks.

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück