CSS Menü mit Untermenüpunkten bei hover

[raven16]

Hallo ich habe ein Menü, welches in einer Reihe als Link mit display: block angezeigt wird und bei der Aktion hover sollen darunter Untermenüpunkte in einer Reihe erscheinen. Meine Vorgehensweise war so:

1. Eine große 50px hohe Div-Box erstellen die zwei kleinere divs für Hauptmenü und Untermenü enthalten mit je 25px Höhe...

div.menubox{
	width: 700px;
	height: 50px;
	background: #eee;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
}
div.mainmenubox{
	width: 700px;
	height: 25px;
	background: #000;
}
div.submenubox{
	width: 700px;
	height: 25px;
	background: #ffe700;
}

2. Menü in diese divs eintragen

a.mainmenu{
	display: block;
	color: #ffe700;
	background: #464328;
	text-decoration: none;
	min-width: 40px;
	height: 22px;
	margin-left: 2px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	float: left;
}
a.mainmenu:hover{
	background: #ffe700;
	color: #000;
}
a.mainmenu div.mainmenu{
	display: none;
}
a.mainmenu:hover div.mainmenu{
	display: block;
	position: absolute;
	width: 400px;
	height: 25px;
	background: #444;
	top: 125px;
	left: auto;
	right: auto;
}

3. html quelltext dazu

<div class="menubox">
	<div class="mainmenubox">
		<a class="mainmenu" href="#">Home</a>
		<a class="mainmenu" href="#">
			Shop
			<div class="mainmenu">
				
			</div>
		</a>
		<a class="mainmenu" href="#">Tickets</a>
		<a class="mainmenu" href="#">Mitglieder</a>
		<a class="mainmenu" href="#">Nachwuchs</a>
		<a class="mainmenu" href="#">Sponsoring</a>
		<a style="clear:left;"></a>
	</div>
	<div class="submenubox">
		
	</div>
</div>

Zuerst wollte ich den Menüpunkt Shop bearbeiten. Wenn ich nun auf Shop mit der Maus fahre, dann blendet <div class="mainmenu"></div> richtig herein... in diese divs sollen die Links für die Untermenüpunkte rein.... diese funktionieren aber einfach nicht! sobald ich in diese div einen link einfüge, geht einfach alles schief und der link steht einfach nicht dort wo er stehen soll!

ich weiß einfach nicht wie ich den link an richtiger Stelle bekomme in die div

Ich hoffe ihr könnt mir vllt. helfen und versteht meine Problemsituation.

 

[charmin]

mach doch einfach eine ul ohne Punkte und mit definierter Breite. Habe ich so bei mir gelöst.

 

[lk22w]

Ich würds mit einer Liste machen. jeder Menupunkt in ein item, darum eine weitere liste mit dem submenu. Position absolut, top 100%, display none. Dann Bei hover über den Menupunkt das submenu auf block oder so stellen.

<ul id="mainmenu">
     <li>
           <a href="bla">bla</a>
           <ul class="submenu">
                  <li><a href="bla2">bla2</a></li>
           </ul>
     </li>
</ul>

hoffe das ist einigermassen verständlich.

 

[raven16]

okay ich lösch gleich nochmal alle menüinhalte und versuch das ganze mit <li>

 

[lk22w]

Kennst du die Methode um beim hover eine Regel auf die Child-Elemente anzuwenden? Wäre noch wichtig hierfür

li.menupunkt:hover > ul{
      display: block;
}