maybe: display: none funktioniert nicht in einer (Selfhtml-)NaviLeiste

Ich habe versucht mit der Methode die auf Selfhtml vorgestellt wird eine Navigationsleiste mit submenus zu erstellen. Allerdings verschwinden die untergeordneten Einträge nicht, bis man über sie mit der maus fährt, sondern bleiben einfach versetzt stehen. Ich bin ziemlich müde und kann das Problem jetzt auch nicht besser beschreiben. Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.

  
body {  
	background-image:url(images/hintergrund.gif)  
	  
	}  
#seite  { 			/*Zentraler Tag für die mittige Zentrierung*/  
	text-align: left;  
	margin: 0 auto;	/* standardkonforme horizontale Zentrierung */  
	width: 800px;  
	padding: 1em;  
	background-color:#ffffff;  
	min-height: 1050px;  
	}  
#seite div {  
	}  
#titel {  
	width: 100%;  
	background-color:#ffffff;  
	text-align: center;  
	}  
#menu{  
	width: 170px;  
	margin-top:50px  
	}  
ul#Navigation {  
	float: left;  
	width: 170px;  
	margin: 0; padding: 1px;  
	background-color: #616a2b;  
	}  
ul#Navigation li {  
    list-style: none;  
	width: 160px;  
	float: left;  
	position: relative;  
	margin: 3px;  
	margin-left: 5px;  
	padding: 0;  
	}  
	*:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
    margin-bottom: -0.1em;  
	}  
ul#Navigation li  ul {  
	list-style: none;  
	margin: 0;  
	padding: 0;  
	position: absolute;  
	top: 1.6em;  
	left: -1em;  
	display: none;  
	}  
ul#Navigation li ul li {  
	list-style: none;  
	width: 160px;  
	float:none;  
	display:block;  
	margin-bottom: 2px;  
	}  
ul#Navigation  a {  
    display:block;  
    color:#eadd88;  
    font-size:20px;  
    font-family:"Bookman Old Style";  
    font-weight: normal;  
    text-decoration:none;  
    background-color: #424421;  
    text-align: center;  
    width:160px;  
    height:25px;  
    }  
ul#Navigation a:hover {  
    color: #424421;  
    background-color: #eadd88;  
	}  
ul#Navigation a:active {  
    color:#000000;  
    background-color: #424421;  
	}  
ul#Navigation span {  
	display:block;  
	font-size:20px;  
	font-family:"Bookman Old Style";  
	color:#424421;  
	background-color:#eadd88;  
	text-align: center;  
	}  
	#Info {  
	float: right; width: 130px;  
	margin: 0; padding: 5px;  
	border: 1px solid silver;  
	}  
#Info p {  
	margin: 0;  
	}  
#text {  
	margin-left:174px;  
	border: 1px solid silver;  
	width: 478px;  
	}	  
#text p {  
	font-family: arial;  
	text-align:left;  
	margin: 1em;  
	color:#000000;  
	}  
img {  
	border: 0;  
	}  

Hier noch der Quelltext meiner Startseite:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
  
	<head>  
		<title>Webseite</title>  
		<link rel="shortcut icon" href="images/symbol.ico" />  
		<link rel="stylesheet" type="text/css" href="style.css" />  
		  
	</head>  
	  
	  
	  
	<body>  
	<div id="seite">  
		<div id="titel">  
			<img src="images/revolution.gif" width="663" height="94" alt="Willkommen" />  
		</div>  
		<div id="menu">  
			<ul id="Navigation">  
				<li><a href="index.htm">Home</a></li>										  
				<li><a href="ordner1/index.htm">Link1</a></li>  
				<li><a href="ordner2/index.htm">Link2</a></li>  
					<ul>  
						<li><a href="ordner2/bilder.htm">Link2a</a></li>  
						<li><a href="ordner2/text.htm">Link2b</a></li>  
					</ul>  
				<li><a href="ueber-mich.htm">Über Mich</a><li>  
				<li><a href="impressum.htm">Impressum</a></li>  
			</ul>  
		</div>  
		  
		<div id="Info">  
			<p>Text  
			</p>  
			<p>  
				<a href="http://jigsaw.w3.org/css-validator/check/referer">  
					<img style="border:0;width:88px;height:31px"  
					src="http://jigsaw.w3.org/css-validator/images/vcss"  
					alt="CSS ist valide!" />  
				</a>  
			</p>  
			  
		</div>  
		<div id="text">  
			<p>  
				Willkommenstext  
			</p>  
		</div>  
	</div>  
	</body>  
  
</html>  
  

Danke im Vorraus
PS: Ja ich habe die SuFu bemüht!!

  1. Hi,

    Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.

    gerne. Der HTML-Code ist invalide; behebe dies zunächst.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      »» Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.

      gerne. Der HTML-Code ist invalide; behebe dies zunächst.

      Cheatah

      So jetzt ist der Code valide

        
      body {  
      	background-image:url(images/hintergrund.gif)  
      	  
      	}  
      #seite  { 			/*Zentraler Tag für die mittige Zentrierung*/  
      	text-align: left;  
      	margin: 0 auto;	/* standardkonforme horizontale Zentrierung */  
      	width: 800px;  
      	padding: 1em;  
      	background-color:#ffffff;  
      	min-height: 1050px;  
      	}  
      #seite div {  
      	}  
      #titel {  
      	width: 100%;  
      	background-color:#ffffff;  
      	text-align: center;  
      	}  
      #menu{  
      	width: 170px;  
      	margin-top:50px;  
      	float: left;  
      	}  
      ul#Navigation {  
      	float: left;  
      	width: 170px;  
      	margin: 0; padding: 1px;  
      	background-color: #616a2b;  
      	}  
      ul#Navigation li {  
          list-style: none;  
      	width: 160px;  
      	float: left;  
      	position: relative;  
      	margin: 3px;  
      	margin-left: 5px;  
      	padding: 0;  
      	}  
      	*:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
          margin-bottom: -0.1em;  
      	}  
      ul#Navigation li  ul {  
      	list-style: none;  
      	margin: 0;  
      	padding: 0;  
      	position: absolute;  
      	top: 1.6em;  
      	left: -1em;  
      	display: none;  
      	}  
      ul#Navigation li ul li {  
      	list-style: none;  
      	width: 160px;  
      	float:none;  
      	display:block;  
      	margin-bottom: 2px;  
      	}  
      ul#Navigation  a {  
          display:block;  
          color:#eadd88;  
          font-size:20px;  
          font-family:"Bookman Old Style";  
          font-weight: normal;  
          text-decoration:none;  
          background-color: #424421;  
          text-align: center;  
          width:160px;  
          height:25px;  
          }  
      ul#Navigation a:hover {  
          color: #424421;  
          background-color: #eadd88;  
      	}  
      ul#Navigation a:active {  
          color:#000000;  
          background-color: #424421;  
      	}  
      ul#Navigation span {  
      	display:block;  
      	font-size:20px;  
      	font-family:"Bookman Old Style";  
      	color:#424421;  
      	background-color:#eadd88;  
      	text-align: center;  
      	}  
      #Info {  
      	margin-top:50px;  
      	float: right; width: 130px;  
      	margin: 0; padding: 5px;  
      	border: 1px solid silver;  
      	}  
      #Info p {  
      	margin: 0;  
      	}  
      #text {  
      	margin-left:174px;  
      	margin-top: 50px;  
      	border: 1px solid silver;  
      	width: 478px;  
      	}	  
      #text p {  
      	font-family: arial;  
      	text-align:left;  
      	margin: 1em;  
      	color:#000000;  
      	}  
      img {  
      	border: 0;  
      	}  
      
      
        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
             "http://www.w3.org/TR/html4/loose.dtd">  
        
        
      <html>  
      	<head>  
      		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
      		<title>Pats Webseite</title>  
      		<link rel="shortcut icon" href="images/symbol.ico">  
      		<link rel="stylesheet" type="text/css" href="style.css">  
      		  
      	</head>  
      	  
      	  
      	  
      	<body>  
      	<div id="seite">  
      		<div id="titel">  
      			<img src="images/titel.gif" width="663" height="94" alt="Willkommen">  
      		</div>  
      		<div id="menu">  
      			<ul id="Navigation">  
      				<li><a href="index.htm">Home</a></li>										  
      				<li><a href="ordner/index.htm">Videos</a></li>  
      				<li>  
      				<a href="ornder1/index.htm">Satire</a>  
      					<ul>  
      						<li><a href="ordner1/bilder.htm">Bilder</a></li>  
      						<li><a href="ordner1/text.htm">Texte</a></li>  
      					</ul>  
      				</li>  
      				<li><a href="ueber-mich.htm">&Uuml;ber Mich</a><li>  
      				<li><a href="impressum.htm">Impressum</a></li>  
      			</ul>  
      		</div>  
      		  
      		<div id="Info">  
      			<p>  
      				<a href="http://validator.w3.org/check?uri=referer"><img  
      				src="http://www.w3.org/Icons/valid-html401"  
      				alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>  
      			</p>  
        			<p>  
      				<a href="http://jigsaw.w3.org/css-validator/check/referer">  
      					<img style="border:0;width:88px;height:31px"  
      					src="http://jigsaw.w3.org/css-validator/images/vcss"  
      					alt="CSS ist valide!">  
      				</a>  
      			</p>  
      			  
      		</div>  
      		<div id="text">  
      			<p>  
      			 text	  
      			</p>  
      		</div>  
      	</div>  
      	</body>  
        
      </html>  
      
      

      Geholfen hats aber nichts :(

      1. !!Richtige Version!!
        So jetzt ist der Code valide, Kleiner Fehler behoben. (li:hover ul)

          
        body {  
        	background-image:url(images/hintergrund.gif)  
        	  
        	}  
        #seite  { 			/*Zentraler Tag für die mittige Zentrierung*/  
        	text-align: left;  
        	margin: 0 auto;	/* standardkonforme horizontale Zentrierung */  
        	width: 800px;  
        	padding: 1em;  
        	background-color:#ffffff;  
        	min-height: 1050px;  
        	}  
        #seite div {  
        	}  
        #titel {  
        	width: 100%;  
        	background-color:#ffffff;  
        	text-align: center;  
        	}  
        #menu{  
        	width: 170px;  
        	margin-top:50px;  
        	float: left;  
        	}  
        ul#Navigation {  
        	float: left;  
        	width: 170px;  
        	margin: 0; padding: 1px;  
        	background-color: #616a2b;  
        	}  
        ul#Navigation li {  
            list-style: none;  
        	width: 160px;  
        	float: left;  
        	position: relative;  
        	margin: 3px;  
        	margin-left: 5px;  
        	padding: 0;  
        	}  
        *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */  
            margin-bottom: -0.1em;  
        	}  
        ul#Navigation li  ul {  
        	list-style: none;  
        	margin: 0;  
        	padding: 0;  
        	position: absolute;  
        	top: 1.6em;  
        	left: -1em;  
        	display: none;  
        	}  
        u#Navigation li:hover ul {  
        	display:block;  
        	}  
        ul#Navigation li ul li {  
        	list-style: none;  
        	width: 160px;  
        	float:none;  
        	display:block;  
        	margin-bottom: 2px;  
        	}  
        ul#Navigation  a {  
            display:block;  
            color:#eadd88;  
            font-size:20px;  
            font-family:"Bookman Old Style";  
            font-weight: normal;  
            text-decoration:none;  
            background-color: #424421;  
            text-align: center;  
            width:160px;  
            height:25px;  
            }  
        ul#Navigation a:hover {  
            color: #424421;  
            background-color: #eadd88;  
        	}  
        ul#Navigation a:active {  
            color:#000000;  
            background-color: #424421;  
        	}  
        ul#Navigation span {  
        	display:block;  
        	font-size:20px;  
        	font-family:"Bookman Old Style";  
        	color:#424421;  
        	background-color:#eadd88;  
        	text-align: center;  
        	}  
        #Info {  
        	margin-top:50px;  
        	float: right; width: 130px;  
        	margin: 0; padding: 5px;  
        	border: 1px solid silver;  
        	}  
        #Info p {  
        	margin: 0;  
        	}  
        #text {  
        	margin-left: 174px;  
        	margin-top: 50px;  
        	border: 1px solid silver;  
        	width: 478px;  
        	}	  
        #text p {  
        	font-family: arial;  
        	text-align:left;  
        	margin: 1em;  
        	color:#000000;  
        	}  
        img {  
        	border: 0;  
        	}  
        	  
          
        
        

        Geholfen hats aber nichts :(

        1. Hi,

          Geholfen hats aber nichts :(

          Online-Beispiele haben den Vorteil, dass ich keine Copy&Paste-Orgie starten muss, um dein Problem nachzuvollziehen.

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
          1. Hi,

            »» Geholfen hats aber nichts :(

            Online-Beispiele haben den Vorteil, dass ich keine Copy&Paste-Orgie starten muss, um dein Problem nachzuvollziehen.

            MfG ChrisB

            Die Website ist noch nicht hochgeladen, sorry!
            Ich kann höchstens einen sreenshot meiner website verlinken.