Az első példában:
- Kiegészítjük a HTML kódot a menülista második szintjével. Annak érdekében, hogy áttekinthető legyen az elemek kiválasztása a felső szinten elhelyezkedő listát egyedi azonosítóval látjuk el '<ul id="menusor">'.
- A display tulajdonságát inline-block-ra állítjuk. Mivel egy szinttel feljebb a szöveget középre igazítottuk, ezért főmenüpontjaink a sor közepén egymás mellett fognak megjelenni.
A második példában:
- A felső szint listaelemeinek pozíciója relatív. Ennek hatására a beágyazott listák helyzetét, abszolút pozicionálás esetén a szülő elem helyzetéből számolják a böngészők.
- A beágyazott listánál a menüpontok magasságával megegyező függőleges eltolás kell megadni. A Z index beállításával pedig elérjük, hogy a menüpont, ha megjelenik, akkor az oldalon lévő többi HTML elem fölé kerüljön.
A harmadik példában:
- A beágyazott listát a display:none; beállítással alapértelmezetten eldugjuk.
- Ha az egérkurzor egy olyan főmenüpont fölé, amelyhez almenü is tartozik akkor a hozzátartozó almenü display tulajdonságát block-ra állítva jeleníthetjük meg az almenüpontokat.
1. példa:
Forráskód
<style type="text/css">
#menusor{ display:inline-block;
width: auto; margin: 0;
padding: 0; list-style: none;}
</style>
...
<body>
<nav id="menu">
<ul id="menusor">
<li><a href="#">Termékek</a>
<ul>
<li><a href="#">Kategória 1</a></li>
<li><a href="#">Kategória 2</a></li>
<li><a href="#">Kategória 3</a></li>
</ul>
</li>
<li><a href="#">Vásárlás</a>
<ul>
<li><a href="#">Kosár</a></li>
<li><a href="#">Megrendelés</a></li>
<li><a href="#">ÁSZF</a></li>
</ul>
</li>
<li><a href="#">Kapcsolatok</a></li>
</ul>
</body>
Eredmény*
2. példa:
Forráskód
<style type="text/css">
.....
#menusor li{
float: left;
position: relative;}
#menusor ul{
list-style: none;
position: absolute;
top: 25px;
left: 0;
z-index: 1000;}
#menusor ul li{
float: none;
margin: 0;
padding: 0;
display: block;}
</style>
...
Eredmény*
3. példa:
Forráskód
<style type="text/css">
....
#menusor li:hover > ul{
display: block;
}
#menusor ul{
list-style: none;
display: none;
}
</style>
...
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_msmenu_3_OK.html