css menü probléma

**Deviant** · 2012-01-16, 02:48

Üdv, próbálok egy olyan horizontális menüt lérehozni, ami a felső sorban tartalmazza a kategóriacímeket, alsó sorban pedig az alkategóriák jelennek meg, ha valaki a felső sorban ráviszi az egeret(hover) az adott kategóriára.

pl van egy ilyen struktúra és nekem azzal van jelenleg gondom, hogy az alkategóriák mindig a szülő alatt jelennek meg, nem pedig a sor elején

HTML kód:

<div id="menu">
	<ul>
		<li>Kategória1</li>
		<li>Kategória2
			<ul>
				<li>Alkategória</li>
			</ul>
		</li>
	</ul>
</div>

Tehát így jelennek meg, ha pl a 3. kategória van épp :hover :

HTML kód:

xxxxx xxxxxxxxx xxxxxxxx xxxxxxxxxxx
                yyyyyy yyyyyyyy

és nem így:

HTML kód:

xxxxx xxxxxxxxx xxxxxxxx xxxxxxxxxxx
yyyyyy yyyyyyyy

Végigpróbáltam egy csomó opciót, de még nem sikerült megtalálni az igazit, ha egyáltalán így meg lehet oldani.. tippek?
Mindenképpen js nélkül szeretném, bár nem nagyon látom ennek esélyét jelenleg

Hasonló témák:

**Sanyi49** · 2012-01-16, 07:12

Azt, hogy balra zárva jelenjen meg annyit kell csinálni, hogy az almenüt nem rakod be a főmenü <ul>-jébe, hanem külön. Ahhoz viszont, hogy a 2. sorban mindig más, a kijelölt menüpont almenüje jelenjenek meg js kell pedig.

**Deviant** · 2012-01-16, 15:53

Nekem mindenképp így kellene, de úgy látom, akkor mégse lehet így megoldani, meh

**hetes** · 2012-01-16, 16:51

Első körben próbáld meg úgy, hogy a #menu-nek position: relative-ot adsz meg CSS-ben, és az alkategória ul elemnek pedig position: absolute-ot, illetve top és left tulajdonságokkal oda helyezed hogy jó legyen. Kábé így:

Kód:

<div id="menu" style="position: relative">
	<ul>
		<li>Kategória1</li>
		<li>Kategória2
			<ul style="position: absolute; left: 0px; top: 150px;">
				<li>Alkategória</li>
			</ul>
		</li>
	</ul>
</div>