Dropdown Menü mit CSS

Elandril

Mitglied
Hallo,

ich sitze jetzt schon ein wenig dran und ich bin bisher nicht wirklich zu einem zufriedenstellenden Ergebnis gekommen.

Ich habe ein horizontales Menü auf einer Website und wollte ein Submenü für einen Menüpunkt einfügen.

HTML-Beispielcode dazu:

HTML:
<header id="menu">
  <nav id="navigation">
    <ul>
      <li><a href="#">Punkt 1</a></li>
      <li><a href="#">Punkt 2 »</a>
        <ul>
          <li><a href="#">Sub 1</a></li>
          <li><a href="#">Sub 2</a></li>
        </ul>
      </li>
      <li><a href="#">Punkt 3</a></li>
      <li><a href="#">Punkt 4</a></li>
    </ul>
  </nav>
</header>

Der CSS-Code dazu:
Code:
#menu {
	width: 100%;
	min-width: 750px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
#navigation {

}

#navigation ul     {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;
	width: 100%;

}
#navigation ul li {
	width: 25%;
	float: left;
	text-align: center;
	background-color: #00FFFF;
}
#navigation ul li:hover {
	background-color: #0099FF;
}
#navigation ul li:hover > ul {
	display: block;
}

#navigation ul li ul {
	display: none;
	position: relative;
}


#navigation ul li ul li{
	width: 100%;
	text-align: left;
}

Ich habs jetzt soweit hinbekommen, dass das Menü beim hovern angezeigt wird. Darunter befindet sich aber als Trennlinie für die Seite ein Logo, das jedes mal weiter nach unten geschoben wird, wenn ich für die Position des Dropdown Teils irgendwas mit relative oder static angebe. Wenn ich das auf fixed oder absolute setze, wird das Logo zwar nicht mehr verschoben, dafür aber läuft mir die Breite des Dropdown Menüs (das in etwa die Breite des Root-Items haben sollte) vollkommen aus dem Ruder.

Gäbe es da irgendeine Möglichkeit, das richtig zu tun und wenn ja, welche? :)

schöne Grüße und vielen Dank
 

Neue Beiträge

Zurück