Fehler im vertikalen FlyOut Menü

SteveB · #1 (**permalink**) 27.04.2011, 17:48

Hallo,

irgendwie bekomme ich es nicht hin, dass das Menü sich anch Rechts ausklappt.

Wo liegt mein Fehler?

Dachte float left und rechts würden den Zweck erfüllen, aber die Unterpunkte der Liste erscheien einfach nicht neben dran.

Sample

html:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bla</title>

<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

	<body>
			<ul class="nav_menu_left">
					<li>Bad Vilbel
							<ul class="child_ul_nav_menu_left">
		              <li>
		                   <a href="http://www.aquafun.de/anfahrt/anf-vilbel.html">Tel. 06101 - 1011</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/anfahrt/anf-vilbel.html">Anfahrt &amp; Kontakt</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/scheine/termine/term-binnen-bv.shtml">Termine SBF Binnen</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/scheine/termine/term-see-bv.shtml">Termine SBF See</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/scheine/termine/term-ubi-bv.shtml">Termine UBI Binnenfunk</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/scheine/termine/term-src-bv.shtml">Termine SRC Seefunk</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/scheine/termine/term-sks.shtml">Termine SKS Theorie</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/scheine/termine/term-toern.html">Termine SKS Segeltoerns</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/anfahrt/anf-vilbel.html">Tel. 06101 - 1011</a>
		              </li>
	            </ul>
					</li>
					
					<li>Mannheim
						<ul class="child_ul_nav_menu_left">
		              <li>
		                   <a href="http://www.aquafun.de/anfahrt/anf-vilbel.html">Tel. 06101 - 1011</a>
		              </li>
		              <li>
		                   <a href="http://www.aquafun.de/anfahrt/anf-vilbel.html">Anfahrt &amp; Kontakt</a>
		              </li>
	          </ul>
					</li>
					
				</ul>
				
    </body>
</html>

css:

Code:

* {
	margin: 0;
	padding: 0;
	}
	
/* ========================================================= */
/* Navigationsmenü links */
/* ========================================================= */
.nav_menu_left {
	padding-left: 100px;
	position:relative;
  font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	width: 160px;
}

.nav_menu_left li {
	display: block;
	width: 160px;
}

.nav_menu_left li:hover > ul {
	
	display: block;
}

.child_ul_nav_menu_left li {
	position: relative;
	text-align:left;
}


.nav_menu_left ul {
	
	display: none;
}

.child_ul_nav_menu_left ul {
	left: 100px;
	position: absolute;
}

Vielen Dank im Voraus für die Hilfe

Borsti · #2 (**permalink**) 27.04.2011, 17:54

CSS Ändern?

Code:

.nav_menu_left li:hover > ul {
    display: inline;
    position: absolute;
}

SteveB · #3 (**permalink**) 27.04.2011, 18:11

Perfekt funktioniert. Vielen Dank.

Hat noch jeamnd ne gute Quelle, wo man sich diesbzgl. weiterbilden kann?

Borsti · #4 (**permalink**) 27.04.2011, 20:32

CSS Allgemein
--> Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Positionierung mit CSS
--> SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
FlyOut Menü klappt nicht über Frame aus?	jimmyhartwig	(X)HTML	5	28.11.2010 19:23
Problem bei flyout Menü	bolshi	CSS	18	30.06.2010 12:27
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
CSS Flyout Menü - Verständnisproblem	mgn84	CSS	31	25.07.2006 20:55