[CSS] Überlappendes hover-dropdown-menü

ChrIzZ1337 · 7. Mai 2011

Überlappendes hover-dropdown-menü

Hey Leute,

ich denke hier kann ich kompetente Hilfe bekommen. Ich muss eine Website in HTML und CSS erstellen für die es eine Semesternote gibt. Nun habe ich das Grundgerüst schon fertig, leider haben sich einige Bugs eingeschlichen, die ich alleine nicht gelöst bekomme.

KIND194 das ist die bisherige website.

wenn man rechts auf "Film 5" geht, überlappt das menü links den untersten Punkt. Evtl brauche ich den gar nicht aber mir geht es ums Prinzip des Codes.

Hier habt ihr den HTML-Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

 <head>
 <!-- Vergabe der meta-Daten: keyword für google, copyright und Standards der website
 -->
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <meta name="keywords" content="fast, furious, hannover, auto, tuning, vin diesel, paul walker, dwayne johnson, the rock">
 <meta name="copyright" content="Fachhochschule Hannover">
 <meta name="author" content="Christian Koch">

 <!-- Titel der Website
 -->
 <title>The Fast and the Furious - die inoffizielle Website</title>



 <!-- hier ist der CSS-Code für die Rollout-Funktion, die im JavaScript geschrieben ist, definiert.
 -->
 <style type="text/css">
 .weg a{display:none}
 .da a{display:normal}
 </style>
 <!-- hier beginnt das JavaScript
 -->
 <script language="JavaScript">//<!--
 function roll(num) { document.getElementById(num).className="da"; }
 function unroll(num) { document.getElementById(num).className="weg"; }
 //--></script>
 <link rel="stylesheet" type="text/css" href="SiteDateien/Styles.css">
 </head>
 <body>

<!-- centerDiv: zentrieren der Website, definieren des Außenbereiches der Website (width:900px)
und definieren des oberen Teils der Website (Banner und Navigation)
-->
 <div id="out">

 
 <div class="centeredDiv">
 <div id="top" class="box">
 </div>


 
 <div id="navigation" >
 <ul id="Navigation">
 <li><a href="#Beispiel">Film 1</a>
 <ul>
 <li><a href="http://ichhabnix.de" target="_blank">Cast1</a></li>
 <li><a href="#Beispiel">Cast2</a></li>
 <li><a href="#Beispiel">Cast3</a></li>
 <li><a href="#Beispiel">Cast4</a></li>
 </ul>
 </li>
 <li><a href="#Beispiel">Film 2</a>
 <ul>
 <li><a href="#Beispiel">Cast1</a>
 <li><a href="#Beispiel">Cast2</a></li>
 <li><a href="#Beispiel">Cast3</a></li>
 <li><a href="#Beispiel">Cast4</a></li>
 </ul>
 </li> 
 <li><a href="#Beispiel">Film 3</a>
 <ul>
 <li><a href="#Beispiel">Cast1</a></li>
 <li><a href="#Beispiel">Cast2</a></li>
 <li><a href="#Beispiel">Cast3</a></li>
 <li><a href="#Beispiel">Cast4</a></li>
 </ul>
 </li> 
 <li><a href="#Beispiel">Film 4</a>
 <ul>
 <li><a href="#Beispiel">Cast1</a></li>
 <li><a href="#Beispiel">Cast2</a></li>
 <li><a href="#Beispiel">Cast3</a></li>
 <li><a href="#Beispiel">Cast4</a></li>
 </ul>
 </li> 
 <li><a href="#Beispiel">Film 5</a>
 <ul>
 <li><a href="#Beispiel">Cast1</a></li>
 <li><a href="#Beispiel">Cast2</a></li>
 <li><a href="#Beispiel">Cast3</a></li>
 <li><a href="#Beispiel">Cast4</a></li>
 </ul>
 </li>
 </ul>
 
 <div>
 </div>
 </div>
 
 
 
 
 </div>
 
 </div>
 
 <br style="clear:all" />

 <!-- zentrieren des unteren Teils der Website und
 Definition der Navigation links mit JavaScript(der Rollout-Effekt) im div Container
 -->
 <div class="centeredDiv">
 <div id="middle">
 
 

 

 <!-- Start der definition des "mittleren" Haupttext-Rechtecks (Containers -->



 <div id="mitte2">
 <div id="mittehead" class="ueberschrift">
 Überschrift
 </div>
 <div id="mittetext">
 Bla bla Platzhalter

 </div>
 <div id="mittefuss">
 Hier steht dann das Copyright!
 </div>

 </div>
 <!-- Hier wird die navigation rechts definiert incl des Rollout-Effektes in JavaScript -->
 <div id="mitte3" class="box">
 <!--<span class="weg" id="m2" onmouseover="roll('m2');" onmouseout="unroll('m2')">
 <b class="ueberschrift">Links</b> <br>
 <a href="http://fh-hannover.de/" target="_blank">FH Hannover<br></a>
 <a href="http://www.jaweb.eu/" target="_blank">JAweb<br></a>
 <a href="kontakt.htm">Kontakt<br></a>
 <a href="impressum.htm">Impressum<br></a>
 </span>
 -->
 <ul id="Navigation1">
 <li><a href="#Beispiel">Film 1</a>
 <ul>
 <li><a href="http://ichhabnix.de" target="_blank">Cast1</a></li>
 <li><a href="#Beispiel">Cast2</a></li>
 <li><a href="#Beispiel">Cast3</a></li>
 <li><a href="#Beispiel">Cast4</a></li>
 </ul>
 </li>
 </ul>
 </li>
 </div>
 </div>
 </div>
 </body>
 </html>

Und hier den CSS-Code:

Code:

html {
}
body {
 text-align:center;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#000; 
}

#out {
 width:900px;
 margin:0px auto;
}

#top {
 background-image:url("Fast2.jpg");
 width:100%;
 height:100px;
 border:1px dotted darkgrey;
 background-repeat:no-repeat;
 -moz-border-radius:10px;
 -khtml-border-radius:10px;
}

#navigation {
 width:800px;
 height:30px;
 margin:0px auto;
 margin-top: 50px; 
 background-color:grey;
 box-shadow:5px 5px 5px #CCC;
 -moz-border-radius:10px;
 -khtml-border-radius:10px;
 border:1px dotted darkgrey;
 padding:30px;
 display::inline-table;
 
 
 
}
ul#navigation li{
 width:90%;
 margin:0px auto;
 display:block;
 list-style-type:none;
 

}

#middle{
 width:900px;
 /*border:1px solid red;*/
 
}

#menuleft {
 float:left;
 width:100%;
 
 
}

#mitte1 {
 
 width:150px;
 float:left;
 margin-top:50px;
 background:white;
 margin-left:30px;
 
 
}

#mitte2 {
 
 width:550px;
 float:left;
 margin-top:50px;
 margin-left:100px;
 margin-right:30px;
 margin-bottom: 50px;
 /*border:1px dotted darkgrey;*/
 padding:10px;
 /*text-align:justify;*/
 /*box-shadow:5px 5px 5px #CCC;*/
 background-color:white;
}

#mitte3 {
 width:150px;
 float:right;
 background-color:white;
 margin-top:50px;
 /*text-align:justify;*/
 
 
}

#mittehead {
 height:30px;
 widht: 550px;
 float:left;
}

#mittetext {
 width:550px;
 height:98%;
 float:left;
 border:1px dotted darkgrey;
 box-shadow:5px 5px 5px #CCC;
 padding:10px;
}


#mittefuss {
 height:2%;
 widht:550px;
 margin-top:50px;
 float:left;
 font-size:9px;
}
 
.navibereich li {
 display:inline;
 font-style:bold;
 list-style-type:none;
 color:white;
 
}

.centeredDiv{ 
 margin:0px auto;
 text-align:left;
 width:900px;
}

/*.box{
 border:1px dotted darkgrey;
 padding:10px;
 box-shadow:8px 8px 8px #CCC;
}*/



.ueberschrift {
 font-style:italic;
}

/* Hier kommen die Styes für die einzelnen Menüs hin */

ul #mLinks {
 list-style-type:none;
 
}

ul #mRechts {
 list-style-type:none;
 text-align:left;
}

ul#mMain li a{
 width:100%;
 color:white;
 height:100%;
 line-height:30px;
 text-align:center; 
 list-style-type:none;
 display:block;
 padding:10px;

}

ul#mMain li{
 float:left;
 height:100%;
 line-height:100%; 
 margin-left:20px;
 /*border:1px solid red;*/
 padding:10px;
 text-align:center;
}

a:link{ 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #000000;
 text-decoration: none;
 text-underline: none; 

}

a:active{ 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#00C;
 text-decoration: none;
 text-underline: none; 
}

a:visited{
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #000000;
 text-decoration: none;
 text-underline: none; 
}


a:hover{ 
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#F00;
 text-decoration: none;
 text-underline: none; 
} 

ul#Navigation {
 margin: 0; padding: 0;
 text-align: center;
 z-index:1;
}

ul#Navigation li {
 list-style: none;
 float: left;
 width: 9em;
 position: relative;
 margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
 margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
 margin-bottom: -0.1em;
}

ul#Navigation li ul {
 margin: 0;
 padding: 0;
 position: absolute;
 top: 1.7em; 
 left: -0.4em;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
 left: -1.5em;
 lef\t: -0.4em;
}
ul#Navigation li ul li {
 float: none;
 display: block;
 margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
 display: block;
 padding: 0.2em 1em;
 text-decoration: none; 
 font-weight: bold;
 background-color:black;
 box-shadow:5px 5px 5px #CCC;
 -moz-border-radius:10px;
 -khtml-border-radius:10px;
 /* border: 1px dotted darkgrey;*/
 color: white; /* Hier die Hintergrundfarbe der Navigationsschrift ändern*/
 
}
* html ul#Navigation a, * html ul#Navigation span { /* nur fuer IE erforderlich */
 width: 100%;
 width: 6.4em;
 }
 ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
 color:blue;
 }
 li a#aktuell { /* aktuelle Rubrik kennzeichnen */
 color: white;
 }
 ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
 background-color: #FFF;
 }
 /* Erweiterung zur dynamischen Ein-/Ausblendung */
 ul#Navigation li>ul {
 display: none; 
 top: 1.6em;
 }
 ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
 display: block;
 }

 /* Workaround fuer den IE 7 */
 *:first-child+html ul#Navigation ul {
 padding-bottom:0.4em;
 }
ul#Navigation1 {
 margin: 0; padding: 0;
 text-align: center;
}

ul#Navigation1 li {
 list-style: none;
 float: left;
 width: 9em;
 position: relative;
 margin: 0.4em; padding: 0;
}
* html ul#Navigation1 li { /* Korrektur fuer den IE 5 und 6 */
 margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation1 li { /* Korrektur fuer den IE 7 */
 margin-bottom: -0.1em;
}

ul#Navigation1 li ul {
 margin: 0;
 padding: 0;
 position: absolute;
 top: 1.7em; 
 left: -0.4em;
}
* html ul#Navigation1 li ul { /* Korrektur fuer IE 5.x */
 left: -1.5em;
 lef\t: -0.4em;
}
ul#Navigation1 li ul li {
 float: none;
 display: block;
 margin-bottom: 0.2em;
}

ul#Navigation1 a, ul#Navigation1 span {
 display: block;
 padding: 0.2em 1em;
 text-decoration: none; 
 font-weight: bold;
 background-color:black;
 box-shadow:5px 5px 5px #CCC;
 -moz-border-radius:10px;
 -khtml-border-radius:10px;
 /* border: 1px dotted darkgrey;*/
 color: white; /* Hier die Hintergrundfarbe der Navigationsschrift ändern*/
 
}
* html ul#Navigation1 a, * html ul#Navigation1 span { /* nur fuer IE erforderlich */
 width: 100%;
 width: 6.4em;
 }
 ul#Navigation1 a:hover, ul#Navigation1 span, li a#aktuell {
 color:blue;
 }
 li a#aktuell { /* aktuelle Rubrik kennzeichnen */
 color: white;
 }
 ul#Navigation1 li ul span { /* aktuelle Unterseite kennzeichnen */
 background-color: #FFF;
 }
 /* Erweiterung zur dynamischen Ein-/Ausblendung */
 ul#Navigation1 li>ul {
 display: none; 
 top: 1.6em;
 }
 ul#Navigation1 li:hover>ul, ul#Navigation1 li>a#aktuell+ul {
 display: block;
 }

 /* Workaround fuer den IE 7 */
 *:first-child+html ul#Navigation1 ul {
 padding-bottom:0.4em;
 }

Wie kann ich evtl das Drop-Down Menü vereinfachen vom CSS her ? Ich dachte da an sowas wie:

Code:


#menue {
 display:none;
}
#menue:hover {
 display:block;
}

Vielen Dank für die Hilfe!

Anzeige

Diggi · 8. Mai 2011

AW: Überlappendes hover-dropdown-menü

Meinst du, dass der erste Unterpunkt des Drop-Down-Menüs den gepunkteten, weißen Rand überlagert oder was anderes? Blick gerade net worauf du hinaus willst.

ChrIzZ1337 · 9. Mai 2011

AW: Überlappendes hover-dropdown-menü

danke aber das hat sich schon erledigt

aber falls ich weitere Probleme beim Erstellen der website kriege, meld ich mich hier

Nützliche Suchen

[CSS] Überlappendes hover-dropdown-menü

Videos zum Themenbereich