nicht angemeldet
Wie bekomme ich das hin, dass das Menu nach unten aufgeht?
Hallo!
Ja, "Thema" sagt ja alles.
Wäre schön, wenn mir jemand helfen könnte.
Vielen Dank schonmal !
HTML
<!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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="navi.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="popupmenu">
<ul>
<li><a href="../../../">Sea Mus</a></li>
<li><a href="" accesskey="http://www.google.com">Google</a>
<ul>
<li><a href="http://images.google.com">Images</a></li>
<li><a href="http://groups.google.com">Groups</a></li>
<li><a href="http://directory.google.com">Directory</a></li>
<li><a href="http://news.google.com">News</a></li>
</ul>
</li>
<li><a href="http://www.mozilla.org/">Mozilla</a>
<ul>
<li><a href="http://www.mozillazine.org/">MozillaZine</a> </li>
<li><a href="http://bugzilla.mozilla.org/">Bugzilla</a></li>
<li><a href="http://texturizer.net/firebird/">Mozilla Firebird</a>
<ul>
<li><a href="http://texturizer.net/firebird/themes.html">Themes</a></li>
<li><a href="http://texturizer.net/firebird/extensions.html">Extensions</a></li>
<li><a href="http://texturizer.net/firebird/documentation.html">Documentation</a></li>
</ul>
</li>
<li><a href="http://www.mozdev.org/">Mozdev</a></li>
</ul>
</li>
<li><a href="sdf">Menu</a>
<ul>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul><li><a href="#">asdfasdfasdf</a></li>
<li><a href="#">asdfasdfasdf</a>
<ul><li><a href="#">kasjdfojasd</a></li></ul>
</li>
<li><a href="#">asdfasdfasdf</a></li></ul>
</li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
#popupmenu{
float: left; /* to keep the other floating objects contained*/
position: relative; /* This can also be fixed or absolute*/
width: 100%;
/*Format */
background-color: #7FA7CD;
color: #345D84;
font-family: Arial, Helvetica, sans-serif;
border-style: solid;
border-width: 1px 0 1px 0;
}
#popupmenu ul{
float: left;
white-space: nowrap;
margin: 0;
padding: 0;
}
/* add more for each extra submenu level*/
#popupmenu ul li,
#popupmenu ul li ul li,
#popupmenu ul li ul li ul li,
#popupmenu ul li ul li ul li ul li
{
margin: 0;
padding: 0;
float: left;
list-style-type: none;
position: relative;
}
/* add more for each extra submenu level*/
#popupmenu ul li ul,
#popupmenu ul:hover li ul li ul,
#popupmenu ul:hover li ul li ul li ul,
#popupmenu ul:hover li ul li ul li ul li ul
{
display: none;
z-index: 1000;
}
/* First submenu level*/
#popupmenu > ul > li:hover > ul{
display: block; /*unhide it*/
float: right;
position: absolute; /* It needs to be absolute
for the effect to work.*/
width: 7em;
bottom: 1.1em; /* This places the the bottom of the
ul 1.1em from the bottom of the enclosing li. This
is the important part of the effect.*/
}
/* For the remaining submenu levels*/
/* add more for each extra submenu level*/
#popupmenu ul li ul li:hover ul,
#popupmenu ul li ul li ul li:hover ul,
#popupmenu ul li ul li ul li ul li:hover ul{
float: right;
display: block;
position: absolute;
width: 7em;
left: 6em;
bottom: 3px; /* Required with some value or
the effect will not work*/
}
#popupmenu ul li:hover ul li{
display: block;
float: left;
width: 100%;
}
#popupmenu ul li a{
float: left;
display: block;
text-decoration: none;
color: #1A3148;
padding: 0 .5em 0 .5em;
}
/* The on state for the link when you are on the submenu.
This should be before the hover state for the link itself*/
#popupmenu ul li:hover > a{
background-color: #1A3148;
color: White;
}
#popupmenu ul li a:hover
{
background-color: #345D84;
color: White;
}
#popupmenu ul li ul li a{
float: none;
border-color: #345D84;
border-style: solid;
border-width: 0 1px 1px 1px;
background-color: #F1F6FA;
color: #345D84;
font-size: 85%;
white-space: normal;
}
#popupmenu ul li ul li:first-child a{
border-width: 1px 1px 1px 1px;
}
-
Hallo!
den source hättest du auch irgendwo uppen können und hier nen link posten. und da das (leider) im ie nicht funzt, kannst du es wohl vergessen, wenn du nicht einen grossen teil der user ausschliessen willst. ob winzigweich das jeh auf die reihe bekommt, das der ie sowas auch mal kann, steht in den sternen.
freundl. Grüsse aus Berlin, Raik
-
Ok, danke.Beim nächsten mal werd ichs irgendwo hochladen. Hast du vielleicht einen Link, wo es solche ähnlichen,fertigen CSS-Beispiele gibt, die auch IE-kompatibel sind?
-
Hallo!
meines wissens geht per css mit dem ie nur ein einfacher tooltip, also eine ebene ohne weitere verschachtelung und ohne links darin. verwendet werden die pseudoformate in verbindung mit einem link. mal nach "tooltip mit css" suchen. ;-)
freundl. Grüsse aus Berlin, Raik
-
-