petra: dynamische navigation

habe eine horizontale navigation (eine liste ) mit subnavigation ersellt. die einzelnen menüblocks sollen allerdings keine feste größe haben, sondern sich nach den wörtern bestimmen. wenn ich allerdings float herausnehme bricht die navigation wieder um. wo liegt der fehler. kann mir jemand helfen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten auch im IE einblenden</title>
<style type="text/css">
  body, p a {
  font-family: verdana, Arial,sans-serif; font-size:12px;
    color: black; background-color: #ffffe0;
  }

ul#Navigation {

white:1000em;
    margin: 0; padding: 0;
    text-align: center;
  }

ul#Navigation li {
  white:1000em;
    list-style: none;
 display:inline;
    float: right;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0; padding: 0;

}
  * html ul#Navigation li {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }

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 */

}
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: left;
    display: block;

}

ul#Navigation a, ul#Navigation span {
    display: block;
    width:7em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;

text-decoration: none;
    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 fuer IE 5.x */
  /*  w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen 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>

<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>

</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
      <table width="631" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center"><ul id="Navigation">
    <li><a href="#Beispiel">Home</a></li>

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

<li><a href="#Beispiel">Referenzen</a></li>

</ul></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</body>
</html>

  1. hi,

    wenn ich allerdings float herausnehme bricht die navigation wieder um.

    Du redest vom float für die LI? Natürlich "bricht" es dann um, weil LI Blockelemente sind.
    Du könntest sie mit display:inline formatieren - allerdings kannst du ihnen dann keine Breite zuweisen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hi,

      wenn ich allerdings float herausnehme bricht die navigation wieder um.

      Du redest vom float für die LI? Natürlich "bricht" es dann um, weil LI Blockelemente sind.
      Du könntest sie mit display:inline formatieren - allerdings kannst du ihnen dann keine Breite zuweisen.

      gruß,
      wahsaga

      ja weiss ich. hab ich auch versucht, aber dann brechen sie auch um. ich möchte den einzelnen menüpunkten auch keine breite zuweisen.
      wie bekomme ich das hin?

      1. hi,

        ja weiss ich. hab ich auch versucht, aber dann brechen sie auch um.

        Na ja, wenn darin dann wieder als block dargestellte Nachfahrenelemente folgen ...

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. hi,

          ja weiss ich. hab ich auch versucht, aber dann brechen sie auch um.

          Na ja, wenn darin dann wieder als block dargestellte Nachfahrenelemente folgen ...

          gruß,
          wahsaga

          ich verstehs nicht sorry

      2. Hi,

        ja weiss ich. hab ich auch versucht, aber dann brechen sie auch um.

        weil die darin enthaltenen Links display:block formatiert sind. Schaue Dir dieses Beispiel an.

        freundliche Grüße
        Ingo