Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 05.02.2014, 22:45
Varru Varru ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 6
Varru befindet sich auf einem aufstrebenden Ast
Standard

Hallo explanator,
vielen Dank für den Code. Ich habe mich dran gesetzt und versucht die Unterschiede und Gründe zu verstehen. Habe dazu einfach probiert die einzelnen Eigenschaften in meinem Schnipsel nochmal nachzubauen. Die meisten Eigenschaften und wie sie sich hier auswirken glaube ich verstanden zu haben.

HTML-Code:
<html>
	<head>
		<title>Dropdown lange submenues</title>
		<style type="text/css">
			#tabs > ul > li.tab {
				width:130px;	/* Wenn ich das rausnehme, klappt das darunter anordnen nicht. Warum? */
				float:left;
				list-style:none;
				margin:0;
				padding:0;
			}

			#tabs ul li:after {
				/*clear:both;	/* Welches float wird hier durch beendet? */
			}

			#tabs ul ul {
				position:relative;
				background-color:inherit;
				/*display:inline-block;*/	/* Warum inline-block und positionierung ausserhalb des Viewports? */
				/*left:-1500%;*/
				display:none;
				padding:5px 0px 5px 0px;
			}

			#tabs ul ul li {
				display:block;
				background-color:inherit;
			}
			
			#tabs > ul > li:hover ul, #tabs ul ul:hover {
				/*left:0%;*/
				display:inline-block;
				z-index:10;
			}

			a {
				display:block;
				width:100%;
			}
			
			a:hover {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="tabs">
			<ul>
				<li class="tab" style="background-color:red;">
					<a href="#1">TAB a</a>
					<ul>
						<li><a href="#1">aaaaaaaaa</a></li>
						<li><a href="#1">aaaaaaaaaaaaaaaaaa</a></li>
						<li><a href="#1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
					</ul>
				</li>
				<li class="tab" style="background-color:green;">
					<a href="#1">Tab b</a>
					<ul>
						<li><a href="#1">bbbbbbbb</a></li>
						<li><a href="#1">bbbbbbbbbbbbbbbbbbb</a></li>
						<li><a href="#1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
Der wichtigste Unterschied der mir aufgefallen ist, dass du dem Untermenü-ul statt display:block; ein display:inline-block; verpasst hast. Das bewirkt scheinbar den ganz entscheidenden Punkt.

Doch es gibt noch ein paar Dinge, die mir nicht klar geworden sind. Warum löst du das Aus- & Einblenden der Unterpunkte durch Positionieren ausserhalb bzw. innerhalb des viewports? Warum machst du das so und nicht mittels display:none;? Und dann noch das li:after { clear:both; }. Welches Element reagiert auf diese Anweisung? Ich vermute alle nachfolgenden ausserhalb des Menüs, konnte es mir aber selber nicht beweisen.

Könntest du deinen css-Code für mich kommentieren, um Licht ins Dunkel zu bringen? Die Lösung ansich ist schon mal gut, aber wenn ich's auch noch vollständig verstehen würde, wäre es natürlich perfekt.

Danke auf jeden Fall schon mal!
Mit Zitat antworten