nicht angemeldet
und ich find den Fehler nicht!
Meine CSS:
ul.dropdown
{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
z-index: 99;}
ul.dropdown * ul
{
list-style: none;
margin:0;
padding: 0;
display:none;
position:absolute;
z-index:99;
width: 11em;}
ul.dropdown li
{
float: left;
border-left: 0px solid #fff;
}ul.dropdown li * li
{
border:1px solid #fff;
float:none;position: relative;
}ul.dropdown ul * ul
{
left:98%;
top:0;}
ul.dropdown a
{
display:block;}
ul.dropdown ul * a
{
height:100%;
}ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
display:none;
}ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
display:block;
}
>
>
> Und die HTML
>
> ~~~html
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
>
> <link rel="stylesheet" type="text/css" href="dropdownmenu.css" />
> </head>
>
>
> <style type="text/css">
>
> body {
> font-family: verdana, arial, sans-serif;
> font-size: 13px;
> }
>
> #nav, #nav ul { /* all lists */
> padding: 0;
> margin: 0;
> list-style: none;
> float : left;
> width : 11em;
> }
>
> #nav li { /* all list items */
> position : relative;
> float : left;
> line-height : 1.25em;
> margin-top : -5px;
> margin-bottom : 5px;
> width: 11em;
> }
>
> #nav li ul { /* second-level lists */
> position : absolute;
> left: -999em;
> margin-left : 11.5em;
> margin-top : -2.75ex;
> }
>
> #nav li ul ul { /* third-and-above-level lists */
> left: -999em;
> }
>
> #nav li a {
> width: 11em;
> display : block;
> color : #FFFFFF;
> font-weight : regular;
> text-decoration : none;
> background-color : #004C7C;
> border : 1px solid #FFFFFF;
> padding : 3px;
> }
>
> #nav li a:hover {
> color : #FFFFFF;
> background-color : #BCCCF0;
> }
>
> #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
> left: -999em;
> }
>
> #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
> left: auto;
> }
>
> #content {
> margin-left : 12em;
> }
> </style>
>
> <script type="text/javascript"><!--//--><![CDATA[//><!--
>
> sfHover = function() {
> var sfEls = document.getElementById("nav").getElementsByTagName("LI");
> for (var i=0; i<sfEls.length; i++) {
> sfEls[i].onmouseover=function() {
> this.className+=" sfhover";
> }
> sfEls[i].onmouseout=function() {
> this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
> }
> }
> }
> if (window.attachEvent) window.attachEvent("onload", sfHover);
>
> //--><!]]></script>
>
> </head>
>
>
> <body>
> <div>
> <ul id="nav">
>
> <li><a href="html/start.html">Start</a>
>
> <li><a href="html/unternehmen.html">Unternehmen</a>
>
> <li><a href="html/produkte.html">Produktgruppen</a>
>
> <ul>
> <li>
> <a href="#">Kupplungen und Zubehör</a>
> </li>
>
> <li>
> <a href="#">Zugkugelkupplungen und Zubehör</a>
> </li>
>
> <li>
> <a href="#">Stützräder und Zubehör</a>
> </li>
>
> <li>
> <a href="#">Gobies</a>
> </li>
>
> <li>
> <a href="#">Loach gobies</a>
> </li>
>
> <li>
> <a href="#">Odontobutidae</a>
> </li>
>
> <li>
> <a href="#">Sandfishes</a>
> </li>
>
> <li>
> <a href="#">Schindleriidae</a>
> </li>
>
> <li>
> <a href="#">Sleepers</a>
> </li>
>
> <li>
> <a href="#">Xenisthmidae</a>
> </li>
> </ul>
>
> <li>
> <a href="html/kontakt.html">Kontakt</a>
> </li>
>
> </ul>
> </div>
> </body>
> </html>
>
>
Ich hoffe mal, dass das alles so richtig ist und ihr mir helfen könnt.
EDIT: in den Produktgruppen sollen jeweils Unterpunkte der einzelnen Produkte entstehen, also z. B. Produktgruppen --> Produktgruppe 1 --> Produkt 1, Produkt 2, usw.
Ich hoffe, ihr versteht, was ich meine