✔ Menü wird durch float falsch dargestellt

[Nils_13]

Hi,

ich mache für meine Homepage ein CSS-Menü. Folgende Beschreibung bezieht sich auf Code- und Bildmaterial: Es soll bei MouseOver (Obereintrag) ein vertikales Menü bestehend aus Untereinträgen angezeigt werden. Dies klappt nur bei float: none bei #menu a. Dadurch werden die Obereinträge allerdings untereinander, statt nebeneinander dargestellt, allerdings (nicht zu sehen) werden die Untereinträge vertikal - wie gewünscht - dargestellt 1. Deshalb habe ich einfach einfach float in der Sektion #menu a auf left gestellt. Auf den ersten Blick denkt man sich "Klappt doch", aber geht man mit der Mouse über einen Obereintrag, wird man feststellen, dass es nicht ganz stimmt, da die Untereinträge falsch dargestellt werden 2.

Wieso tritt dieser Fehler auf und wie kann ich ihn beseitigen ? Hier noch die Codes:

CSS:

#menu
{
  border-top        : 0px solid #000000;
  border-bottom  : 0px solid #000000;
  height               : 26px;
  width                 : 500px;
}

#menu ul
{
  list-style : none;
  margin   : 0;
  padding : 0;
  width      : 78px;
  height    : 26px;
}

#menu a, #menu h2
{
  float             : left;
  font              : bold 11px/16px verdana, verdana, verdana;
  display          : block;
  border-width : 0px;
  margin          : 0;
  padding        : 0px 0px;
}

#menu h2
{
  color                : #FFFFFF;
  background     : #000000;
  text-transform : uppercase;
  float                 : none;
}

#menu a
{
  color                  : #000000;
  background       : url("./img/menu.png");
  text-decoration : none;
  float                   : left;
}

#menu a:hover
{
  color            : #000000;
  background : #609DD3;
}

#menu li
{
  position : relative;
}

#menu ul ul
{
  position : absolute;
  z-index  : 500;
}

#menu ul ul ul
{
  position : absolute;
  top      : 0;
  left     : 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{
  display : none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{
  display : block;
}

HTML:

<div id="menu">
    <ul>
      <li><a href="index.php" ...></a>
        <ul>
          <li><a href="index.php">Start</a></li>
          <li><a href="links.php">Links</a></li>
          <li><a href="me.php">&Uuml;ber mich</a></li>
        </ul>
      </li>

      <li><a href="proj.php" ...></a>
        <ul>
          <li><a href="dp.php">Dark Player II</a></li>
          <li><a href="13.php">13</a></li>
          <li><a href="fastpage.php">Fast Page</a></li>
          <li><a href="smalledit.php">Small Edit</a></li>
          <li><a href="tasks.php">Tasks</a></li>
        </ul>
      </li>
    </ul>
</div>

 

[Maik]

Hi,

orientiere dich mal an Stu Nicholls' Dropdown-Menüs, wie beispielsweise:

1. http://www.cssplay.co.uk/menus/drop_definition2.html
2. http://www.cssplay.co.uk/menus/drop_definition3.html
   
3. http://www.cssplay.co.uk/menus/final_drop.html

 

[Nils_13]

Danke, hat mir sehr weitergeholfen.