wheelie86: Dritte Menüebene klappt nicht...

SELF-Forum

Dritte Menüebene klappt nicht...

wheelie86
– Informationen zu den Bewertungsregeln

... 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 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&ouml;r</a>  
			</li>  
						  
			<li>  
			<a href="#">Zugkugelkupplungen und Zubeh&ouml;r</a>  
			</li>  
			  
			<li>  
			<a href="#">St&uuml;tzr&auml;der und Zubeh&ouml;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....

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Dritte Menüebene klappt nicht...

    Wheelie86
    – Informationen zu den Bewertungsregeln

    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&ouml;r</a>  
> 			</li>  
> 						  
> 			<li>  
> 			<a href="#">Zugkugelkupplungen und Zubeh&ouml;r</a>  
> 			</li>  
> 			  
> 			<li>  
> 			<a href="#">St&uuml;tzr&auml;der und Zubeh&ouml;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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dritte Menüebene klappt nicht...

      wheelie86
      – Informationen zu den Bewertungsregeln

      Hat sich erledigt. Hab mir ein lizenzfreies ausm Netz gezogen und bastel mir das nun zurecht.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln