tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 1 Beitrag von superoelk
  • 1 Beitrag von superoelk
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
523
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 29.06.11 20:58 #1
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    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-Code:
    <!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;&#187;</a>
				<ul>
				<li><a href="#">Fonts</a></li>				
				<li><a href="#">Graphics</a></li>
				<li><a href="#">Themes&nbsp;&#187;</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;&#187;</a>
			<ul>
				<li><a href="#">Javascript</a></li>
				<li><a href="#">CSS&nbsp;&#187;</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.
    Geändert von Netzwerkidi (29.06.11 um 21:28 Uhr) Grund: Ergänzung
     
    Zitieren Zitieren
  2. 30.06.11 19:48 #2
    superoelk superoelk ist offline Mitglied
    Registriert seit
    Oct 2007
    Beiträge
    19
    Moin,

    streich mal das position:absolute; bei #cssm1 ul li ul li:hover ul dann klappts.

    Gruß
    Netzwerkidi bedankt sich. 
    Zitieren Zitieren
  3. 30.06.11 20:44 #3
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    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
    Geändert von Netzwerkidi (30.06.11 um 21:10 Uhr)
     
    Zitieren Zitieren
  4. 30.06.11 22:01 #4
    superoelk superoelk ist offline Mitglied
    Registriert seit
    Oct 2007
    Beiträge
    19
    Moin,

    dazu musst du

    Code :
    1
2
3
4
5
6
7
8

    #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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13

    #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ß
    Netzwerkidi bedankt sich. 
    Zitieren Zitieren
« Zuweisung wird ignoriert | Zellengröße entspricht nicht den Werten in der CSS »

Ähnliche Themen

  1. JSplitPane - Listener für Größenänderung
    Von SeeSharpNewBee im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 20.12.07, 12:35
  2. Window Size und größenänderung
    Von mrno im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 11.11.07, 19:22
  3. Größenänderung bei Frames
    Von hoscha123 im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 07.04.07, 18:19
  4. Größenänderung der Bühne
    Von Saiya-Gin im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 10.03.05, 16:32
  5. dynamische Größenänderung
    Von michaelwengert im Forum VisualStudio & MFC
    Antworten: 1
    Letzter Beitrag: 28.06.04, 09:30