Probleme bei Drop Down Menü

Status
Nicht offen für weitere Antworten.

Drillerkiller

Grünschnabel
3 kleine Probleme beim Dropdownmenü

Ich hab einige Probleme mit mienem Drop Down Menü. Ich würde mich freuen wenn ihr mir bei einigen helfen könnt.
Also das sind die Probleme:
1. Zwischen den Buttons sind Lücken. Aber ich meöchte das die Butoons zusammenhängen und ich weiß nicht was ich dafür machen muss.
2.Ich möchte die Schrift- und Buttongröße verkleinern.
3. Die Buttons sollen alle gleich groß sein.

Hier ist der code:
Code:
<html>
<head>
<title></title>
<script type="text/javascript">
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 = "white";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif ;
    color: black; background-color: white;
 
 }

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

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 8.6em;
    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;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
    width: 100%;
    w\idth: 6.4em;
  }

  
  
body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #white;
  }

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

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    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.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: black; border-top-color: black;
    color: black; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  


</style>
</head>
<body>
  

<ul id="Navigation" >

<li><a href="#Beispiel">Home</a>
       <ul>
        <li><a href="#Beispiel">News</a></li>
        <li><a href="#Beispiel">Kontakt</a></li>
        <li><a href="#Beispiel">Über uns</a></li>
      </ul>
<li><a href="#Beispiel">Serien</a>
     <ul>
        <li><a href="#Beispiel">Alphabet</a></li>
        <li><a href="#Beispiel">Kategorie</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Filme</a></li>
<ul>
        <li><a href="#Beispiel">Alphabet</a></li>
        <li><a href="#Beispiel">Kategorie</a></li>
      <li><a href="#Beispiel">Kinofilme</a></li>
</ul>
</li>
    <li><a href="#Beispiel">Schauspieler</a>
      <ul>
        <li><a href="#Beispiel">Alphabet</a></li>
        <li><a href="#Beispiel">Kategorie</a></li>
      </ul>
    </li>

    <li><a href="#Beispiel">Games</a></li>
  <ul>
<li><a href="#Beispiel">Alphabet</a></li>
        <li><a href="#Beispiel">Kategorie</a></li>
      </ul>
    </li>
    <li><a href="#Beispiel">TV</a></li>
  <ul>
<li><a href="#Beispiel">Programm</a></li>
      </ul>
    </li>
<li><a href="#Beispiel">Forum</a></li>
</ul><div></div></div>

</body>
</html>

Hier ist die Seite hochgeladen.

Ich würd mich freuen wenn ich irgendwann eine Antwort bekomme. Danke schonmal im vorraus.
 
Zuletzt bearbeitet:
Hi,

als erstes solltest du mal den doppelt vorhandenen CSS-Code aus dem Stylesheet entfernen.

  1. Die Lücken resultieren wohl aus der margin:0.4em-Deklaration für die Listenpunkte.

  2. Die Schriftgröße ist derzeit im body-Selektor in der font-Eigenschaft deklariert, die Buttongröße im Selektor ul#Navigation li in der width-Eigenschaft, sowie mit der padding-Eigenschaft im Selektor ul#Navigation a, ul#Navigation span.

  3. Die Buttons sind durch die im Punkt 2 genannten Eigenschaften gleich groß.
mfg Maik
 
Also erstmal danke du hast mir sehr weitergeholfen aber ich hab ein neues Problem.

1.wenn man auf einen der buttons geht, kommt die andern Buttons ganz normal rausgefahren. aber sie sind ein bießchen verschoben. Sie sind nicht genau unter dem Button darüber. Schwer zu erklären. Am besten mal angucken.
2. Es sind zwischen den herausgefahrenen Buttons noch so graue stellen die sollen auch weg.

Hier ist wieder der code:
Code:
<html>
<head>
<title>Geteilte Navigationsleisten</title>
<script type="text/javascript">
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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

<style type="text/css">
body {
    font: normal 100.1% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

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

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0em; 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.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }

 
 
</style>
</head>
<body>

  <ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

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

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

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

    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>

</body>
</html>

Und hier die Seite.
 
Zuletzt bearbeitet:
Die erforderlichen Änderungen sind hier im Quellcode fett markiert:

Code:
<html>
<head>
<title>Geteilte Navigationsleisten</title>
<script type="text/javascript">
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 = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

<style type="text/css">
body {
    font: normal 100.1% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

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

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0em; 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.6em; left: 0em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: 0em;
    lef\t: 0em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    /*background-color:silver;*/ padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }



</style>
</head>
<body>

  <ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

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

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

    <li><a id="#Beispiel" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>

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

    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>

</body>
</html>
mfg Maik
 
So dann noch mal Dankeschön Maik
jetzt hab ich noch 2 Probleme dann sollte ich mit dem Menü zufrieden sein.

1.Ich möchte das Menü in der Mitte der Seite haben. Ich schätze mal das funktioniert mit center, aber ich weiß nicht wohin damit.
2.Die Buttons und die Buttons die rausfahren sind nicht alle gleich groß. Ich hab keine Idee wie ich das machen soll.

Hier ist der code:
Code:
<html>
<head>
<title>Geteilte Navigationsleisten</title>
<script type="text/javascript">
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 = "white";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

<style type="text/css">
body {
    font: normal 100% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
  }

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

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0em; 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: 0em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: 0em;
    lef\t: 0em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:white; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
 
  
</style>
</head>
<body>

<ul id="Navigation">
   
<li><a href="#Beispiel">Home</a>
    <ul>
        <li><a href="#Beispiel">News</a></li>
        <li><a href="#Beispiel">Kontakt</a></li>
        <li><a href="#Beispiel">Über uns</a></li>
    </ul></li>

<li><a href="#Beispiel">Serien</a>
    <ul>
        <li><a href="#Beispiel">Alphabetisch</a></li>
        <li><a href="#Beispiel">Kategorisch</a></li>
    </ul></li>

<li><a href="#Beispiel">Film</a></li>
    <ul>
        <li><a href="#Beispiel">Alphabetisch</a></li>
        <li><a href="#Beispiel">Kategorisch</a></li>
    </ul></li>
    
<li><a href="#Beispiel">Schauspieler</a>
      <ul>
          <li><a href="#Beispiel">Alphabetisch</a></li>
          <li><a href="#Beispiel">Kategorisch</a></li>
      </ul></li>

<li><a href="#Beispiel">Games</a></li>
      <ul> 
          <li><a href="#Beispiel">Alphabetisch</a></li>
          <li><a href="#Beispiel">Kategorisch</a></li>
      </ul></li>

<li><a href="#Beispiel">Forum</a></li>
</ul><div></div></div>

</body>
</html>

Und hier ist die seite mal wieder abgebildet
 
Hi.

Code:
* html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
   /*w\idth: 6.4em;*/  /* auskommentiert = deaktiviert */
  }
  • Dort, wo du Untermenüs eingerichtet hast, gehört der schliessende </li>-Tag unmittelbar nach den Links entfernt:
Code:
<li><a href="#Beispiel">Film</a></li>
    <ul>
        <li><a href="#Beispiel">Alphabetisch</a></li>
        <li><a href="#Beispiel">Kategorisch</a></li>
    </ul></li>
mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück