GaHero: Drop Down Menü

SELF-Forum

Drop Down Menü

GaHero
– Informationen zu den Bewertungsregeln

Hallo,

ich habe folgenden Code für ein Drop Down Menü hier gefunden und ein wenig angepasst:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">

div#Rahmen {
    width: 60%;
    padding: 0px;
    border: 0px;
    float: right;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

ul#Navigation li {
    list-style: none;
    float: right;
    position: relative;
    margin: 0px; padding: 0;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: 0px; /* Abstand Button - unterer Rand Rahmen*/
  }

ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 26px; left: 0px;
    display: none;  /* Unternavigation ausblenden */
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    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: 0px;
  }

ul#Navigation a{
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 0px;
    color: maroon; background-color: #ccc;
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    color: white; background-color: gray;
  }

</style>
</head>
<body>
  <div id="Rahmen">
  <ul id="Navigation">

<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 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
        <li><a href="#Beispiel">Seite 4b</a></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>

</ul><div></div></div>
</body>
</html>

Klappt auch alles, so wie ich es haben will. Allerdings ist die Darstellung in den verschiedenen Browsern noch immer ein Problem. Viele Sachen ahbe ich schon selber hinbekommen, aber der Abstand zwischen Menüleiste und Drop Down Menü beträgt entweder 0px (FF 2/3b2) oder 1px (INet 7/ Opera 9.25). Woran liegt das? Wie kann man das beheben?

Viele Grüße
GaHero

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Drop Down Menü

    nils-hero
    – Informationen zu den Bewertungsregeln

    Hallo,

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<title>Dynamisch Navigationsleisten einblenden</title>  
<style type="text/css">  

~~~~~~css
  
* {  
 margin: 0;  
 padding: 0;  
 border: 0;  
 font-size: 1em;  
 line-height: 1em;  
}  
  
div#Rahmen {  
 width: 60%;  
 float: right;  
}  
  
div#Rahmen div {  
 clear: left;  
}  
  
ul#Navigation {  
 text-align: center;  
}  
  
ul#Navigation li {  
 list-style: none;  
 float: right;  
 position: relative;  
}  
  
* :first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */  
 margin-bottom: 0px; /* Abstand Button - unterer Rand Rahmen*/  
}  
  
ul#Navigation li ul {  
 position: absolute;  
 top: 16px;  
 left: 0px;  
 display: none; /* Unternavigation ausblenden */  
}  
  
* :first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */  
 padding-bottom: 0em;  
}  
  
ul#Navigation li:hover ul {  
 display: block; /* Unternavigation in modernen Browsern einblenden */  
}  
  
ul#Navigation li ul li {  
 float: none;  
 display: block;  
 margin-bottom: 0px;  
}  
  
ul#Navigation a {  
 display: block;  
 width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */  
 padding: 0 1em;  
 text-decoration: none;  
 font-weight: bold;  
 border: 0px;  
 color: maroon;  
 background-color: #ccc;  
}  
  
ul#Navigation a:hover,ul#Navigation span,li a#aktuell {  
 border-color: black;  
 color: white;  
 background-color: gray;  
}  

~~~~~~html
  
</style>  
</head>  
<body>  
<div id="Rahmen">  
<ul id="Navigation">  
  
 <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 4</a>  
 <ul>  
  <li><a href="#Beispiel">Seite 4a</a></li>  
  <li><a href="#Beispiel">Seite 4b</a></li>  
  <li><a href="#Beispiel">Seite 4c</a></li>  
 </ul>  
 </li>  
  
</ul>  
<div></div>  
</div>  
</body>  
</html>

    Zum Weitertesten...

    Gruß, Nils

    --
    Bookmarks
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Drop Down Menü

      GaHero
      – Informationen zu den Bewertungsregeln

      Hallo,

      mit deinem Code geht es leider auch nicht, gleiches Problem wie vorher...

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Drop Down Menü

        nils-hero
        – Informationen zu den Bewertungsregeln

        Hallo,

        Ich hab das Beispiel (leicht verändert) mal auf meine Seite hochgeladen, funktioniert (der IE sollte dich nicht jucken, wenn Du eine private Seite hast, lies hier den untersten Textabsatz).

        Sieh Dir den Seitenquelltext an (rechtsklick).

        Gruß, Nils

        --
        Bookmarks
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln