ausgeklappte navigation verschwindet wenn ich drauf gehn wil

mj23 · 23. Juli 2009

wenn ich einen menüpunkt in der navileiste anwählen erscheint das untermenü doch ich es bleibt nicht bestehen wenn ich von dem Menüpunkt auf das untermenü gehen möchte.

Wo liegt der Fehler???

Code

body {
	margin:0px;
	padding:0px;
}




  div#Tmenu {
    font-size: 15px;
    padding: 33px;
    border-bottom:3px solid white;
    background-color: #000000;
	background-image:url(schwarzerbalken.gif);
	background-repeat:no-repeat;
	height:40px;
  }  
  * html div#Tmenu {
    width: 100%;
    w\idth: 100%;  /* IE 6 in standards-compliant mode */
  }

  div#Tmenu div {
    clear: left;
  }

  ul#Navigation {
    margin: 0;
	padding: 0px 0px 0px 120px;	/* oben, rechts, unten, links */
    text-align: center;
	z-index:2;
	position:absolute;
  }




  ul#Navigation li {
    list-style: none;
    float: left;
    margin: 0em;
	padding: 0em;
  }  
  * html ul#Navigation li {
    margin-bottom: -0.4em;
  }




  ul#Navigation li ul {
    margin: 0;
	padding: 0;
    top:5em;
	border:1px solid white;
	position:absolute;
  }
  * html ul#Navigation li ul {
    left: -1.5em;
    lef\t: -0.4em;
  }

  ul#Navigation li ul li {
    float: none;
    display: block;
    margin: 0em;
	border-bottom:1px solid white;
  }




  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 7em;
    font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
    text-decoration: none; font-weight: bold;
    padding: 0.23em 0.97em 0.16em 1.03em;
    border-left-color: white; border-top-color: white;
	color: white;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 9.2em;
    w\idth: 7em;  /* IE 6 in standards-compliant mode */
  }

  ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
    padding: 0.16em 1.03em 0.23em 0.97em;
	color: green;
  }

  ul#Navigation li ul a:hover {
    border-color: white;
    background-color: grey;
	color: green;
  }

  li a#aktuell {
    color: green;
  }

  ul#Navigation li ul span {
    color: green;
  }

  ul#Navigation li a:active, ul#Navigation li:hover a:active {
    color: green;
	background-color: black;
  }




/* dynamisches Ein-/Ausblenden */
  ul#Navigation li ul {
    display: none;
  }

  ul#Navigation li:hover ul {
    display:block;
    background: black;
  }




.img150 {
	height:222px;
	width:320px;
	position:absolute;
	z-index:1;
	margin-top:50px;
	margin-left:65px;
	border:3px solid #000000;
}




.img151 {
	height:222px;
	width:320px;
	position:absolute;
	z-index:1;
	margin-top:50px;
	margin-left:415px;
	border:3px solid #000000;
}




.img152 {
	height:222px;
	width:320px;
	position:absolute;
	z-index:1;
	margin-top:50px;
    margin-left: 190px;
	border:3px solid #000000;
}




#inhaltsbox_1 {
	width:50%;
	height:84%;
	background-color:#7F0E0E;
	position:absolute;
	margin-left:0%;
    margin-top:0%;
	background-image:url(karo1.gif);
	background-repeat:repeat;
}




#inhaltsbox_2 {
	width:50%;
	height:84%;
	background-color:#654829;
	position:absolute;
	margin-left:50%;
	margin-top:0%;
	background-image:url(karo2.gif);
	background-repeat:repeat;
}

Alles anzeigen

lauras · 23. Juli 2009

Der CSS Code allein hilft da wenig. Aber wahrscheinlich liegt das Untermenue einfach außerhalb des hover-Bereichs.

mj23 · 23. Juli 2009

das könnte sein den das problem ist erst aufgetreten als ich das untermenü mit

Code

ul#Navigation li ul {
    margin: 0;
   padding: 0;
    top:5em;
   border:1px solid white;
   position:absolute;

nach unten verschoben habe.

hier ist noch der javacode und der html code

Code

if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }




  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }




  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "#eee";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }




  window.onload=hoverIE;
}
</script>
<![endif]-->

Alles anzeigen

HTML

<!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>Startseite</title>
		<link rel="stylesheet" href="style.css" type="text/css"/>
		<script type="text/javascript"></script>
	</head>




	<body>

		<div id="Tmenu">
  <ul id="Navigation">




    <li><a id="aktuell" href="#Beispiel">Seite 1</a>
      <ul>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 1b</a></li>
        <li><a href="#Beispiel">Seite 1c</a></li>
        <li><a href="#Beispiel">Seite 1d</a></li>




      </ul>
    </li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a>
      <ul>
        <li><a href="#Beispiel">Seite 3a</a></li>
        <li><a href="#Beispiel">Seite 3b</a></li>




        <li><a href="#Beispiel">Seite 3c</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">Seite 4</a></li>
  </ul>
  <div></div>
</div>




   		<div id="inhaltsbox_1"><img class="img150" src="108.jpg"></div>

		<img class="img151" src="dsc_0029.jpg">

		<div id="inhaltsbox_2"><img class="img152" src="dsc_0029.jpg"></div>

  </body>
</html>

Alles anzeigen

mj23 · 27. Juli 2009

Jetzt funktioniert es! Der Code musste wie folgt geändert werden:

Code

ul#Navigation li ul {
    margin: 0;
	padding: 0;
    top:3.15em;
	position:relative;
	border:1px solid white;	
	display:none;

ausgeklappte navigation verschwindet wenn ich drauf gehn wil

Jetzt mitmachen!

Teilen