✔ horizontales Menü

K

Kalito

Erfahrenes Mitglied
hallo,

hier hab ich die Hilfe von meinem ersten Problem bekommen.

Aber da ich jetzt nun ein reines css Problem habe, poste ich es lieber mal hier:

folgden Code habe ich:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Hover Menü</title>

	<style type="text/css">
		.menu{
      display: inline;
  }
        .submenu {
			display:none;
		}

		.menu:hover .submenu {
			display:block;
		}
	</style>

	<!--[if lte IE 6]>
		<script type="text/javascript">var ie_lt_6=true;</script>
	<![endif]-->
	<script type="text/javascript">
	/* <![CDATA[ */
		if(window.ie_lt_6) {
			var container = document.getElementById('menu_container');
			var items = container.getElementsByTagName('li');

			for(var i=0; i<items.length; i++) {
				if(/ menu /.test(' ' + items[0].className + ' ')) {
					items[i].onmouseover = showSub;
					items[i].onmouseout = hideSub;
				}
			}

			function showSub() {
				var list = this.getElementsByTagName('ul');

				for(var i=0; i<list.length; i++) {
					if(/ submenu /.test(' ' + list[i].className + ' ')) {
						list[i].style.display = 'block';
					}
				}
			}

			function hideSub() {
				var list = this.getElementsByTagName('ul');

				for(var i=0; i<list.length; i++) {
					if(/ submenu /.test(' ' + list[i].className + ' ')) {
						list[i].style.display = 'none';
					}
				}
			}
		}
	/* ]]> */
	</script>
</head>

<body>
	<div id="menu_container">
		<ul>
			<li class="menu">
				<a href="#">Mein Profil</a>
				<ul class="submenu">
					<li><a href="#">Anzeigen</a></li>
					<li><a href="#">Bearbeiten</a></li>
					<li><a href="#">Foto hochladen</a></li>
				</ul>
			</li>
            <li class="menu"><a href="#">WIW</a></li>
			<li class="menu">
				<a href="#">Personal</a>
				<ul class="submenu">
					<li><a href="#">Statistik</a></li>
					<li><a href="#">Bearbeiten</a></li>
					<li><a href="#">Foto hochladen</a></li>
				</ul>
			</li>
			<li class="menu">
				<a href="#">UK</a>
				<ul class="submenu">
					<li><a href="#">Anzeigen</a></li>
					<li><a href="#">Bearbeiten</a></li>
					<li><a href="#">Foto hochladen</a></li>
				</ul>
			</li>
			<li class="menu">
				<a href="#">QM</a>
				<ul class="submenu">
					<li><a href="#">Anzeigen</a></li>
					<li><a href="#">Bearbeiten</a></li>
					<li><a href="#">Foto hochladen</a></li>
				</ul>
			</li>
			<li class="menu"><a href="#">IT</a></li>
			<li class="menu">
				<a href="#">Schulungen</a>
				<ul class="submenu">
					<li><a href="#">Anzeigen</a></li>
					<li><a href="#">Bearbeiten</a></li>
					<li><a href="#">Foto hochladen</a></li>
				</ul>
			</li>
			<li class="menu"><a href="#">Logout</a></li>

		</ul>
	</div>

</body>

</html>

Das mit dem mouseover klappt auch recht gut. Mein Problem nur ist, das ich es horizontal hhaben möschte. Sprich Mein Profil, WIW, QM, UK, Personal, IT ; Schulungen und Logout sollen nebeneinander stehen und das Submenü soll als Block nach unten.

wenn ich aber

Code: 
		.menu{
      display: inline;
  }

schreibe, dann wird das Element wieder zu Block bzw vertikale Liste

Was muss ich ändern?
 
spicelab hat gesagt.:
In der Regel wird dies per absoluten Positionsangaben für die Submenüs geregelt.
Zum Vergrößern anklicken....
Gilt in diesem Fall auch für die Untermenüebenen der Dropdown-Menüs, so wie von dir eben verlinkt.

Auszug aus dem CSS deines genannten Menüs hat gesagt.:
CSS: 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück