Mein Dropdown Menü hat noch zwei Macken

[chriss_2oo4]

Hi,

ich bin neu im Bereich CSS und habe auch schon ein Problem. Mein DropDown Menü will nicht so wie ich das will. Menü 1 soll horizontal angeordnet sein und wenn man mit der Maus über den einen Menüpunkt fährt, soll ein vertikales Menü 2 "aufklappen".

HTML technisch habe ich das mit zwei geschachtelten Listen (ul) mit folgender (pseudo) Struktur gelöst:

<div id="navigation">
  <ul>
    <li>
      <a href="#"> Punkt 1 </a>
      <ul> <li> <a href="#"> Punkt 1.1 </a> </ul>
    </li>
  </ul>
</div>
</div>

CSS

#navigation {
	padding: 10px 20px;
	background-color: #fff;
}


#navigation ul, #navigation ul ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/* Navigation Ebene 1 */

#navigation ul li {
	width: 150px;
	float:left;
}

#navigation ul li a {
	color: black;
	font-size: 15px;
	text-decoration: none;
}

/* Navigation Ebene 2 */

#navigation ul li ul {
	display: none
}

#navigation ul li:hover ul {
	margin-top: 10px;
	display: block;
	height: 65px;
	background-color: #000;
}

Mein 1. Problem ist nun, dass sich der restliche Code nach unten verschiebt, sobald ich via Maus auf den Menüpunkt gehe (was ja auch logisch ist, wenn ein blockelement angezeigt wird).

Ich möchte aber, dass das aufklappende Menü über den folgenden Elementen liegt; geht sowas?


2. Problem, die Höhe des aufklappenden Menüs (momentan von Hand auf 65 px angepasst) sollte sich automatisch auf den Inhalt, also die Anzahl der li Elemente anpassen.


Vielleicht kann mir ja jemand helfen, wäre super.


Vielen Dank und Grüße,
Chriss

 

[Fabio Hellmann]

Hi,
ich bin zwar auch neu in das Themengebiet von CSS eingestiegen, kann dir aber evtl. weiterhelfen.

Mein 1. Problem ist nun, dass sich der restliche Code nach unten verschiebt, sobald ich via Maus auf den Menüpunkt gehe (was ja auch logisch ist, wenn ein blockelement angezeigt wird).

Ich möchte aber, dass das aufklappende Menü über den folgenden Elementen liegt; geht sowas?

Dazu habe ich hier einen (evtl.) hilfreichen Beitrag zu dem Element 'z-index' mit dem du die Position auf der Z-Achse angeben kannst. Ob dir das in deinem Fall weiterhilft, weiß ich nicht.

2. Problem, die Höhe des aufklappenden Menüs (momentan von Hand auf 65 px angepasst) sollte sich automatisch auf den Inhalt, also die Anzahl der li Elemente anpassen.

Setz doch die Höhe auf 100% (height: 100%), dann sollte sich die Höhe dem Text automatisch anpassen.

Gruß

Fabio

 

[chriss_2oo4]

Hi,

vielen Dank für Deine Antwort, Fabio.

Die gleichen Gedanken hatte ich auch schon, aber der z-Index lässt sich imo nur für Elemente nutzen, die absolut positioniert wurden.

Das mit height: 100% funktioniert leider auch nicht.


Trotzdem danke!


Grüße,
Chriss

 

[javaDeveloper2011]

Hi,

weiss nich obs die weiterhilft, aber zum Thema gibts ein ziemlich gutes Tutorial.

Gruß