nicht angemeldet
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;
}