Három lépésben végezzük el az átalakítást.
Az első példában:
- A HTML kódot kiegészítjük egy újabb lista szinttel.
A második példában:
- Az újonnan beágyazott listát most nem függőleges irányban tóluk el, hanem vízszintesen, a magasabb szintű menüpontok mellé.
A harmadik példában:
- Az alsó szintű link elemeket, a jobb áttekinthetőség érdekében a többihez képest átszínezzük.
1. példa:
Forráskód
....
<ul id="menusor">
<li><a href="#">Termékek</a>
<ul>
<li><a href="#">Kategória 1</a>
<ul>
<li><a href="#">Alkat 1.1</a></li>
<li><a href="#">Alkat 1.2</a></li>
<li><a href="#">Alkat 1.3</a></li>
</ul>
</li>
<li><a href="#">Kategória 2</a>
<ul>
<li><a href="#">Alkat 2.1</a></li>
<li><a href="#">Alkat 2.2</a></li>
<li><a href="#">Alkat 2.3</a></li>
</ul>
</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>
...
Eredmény*
2. példa:
Forráskód
<style type="text/css">
.....
#menusor ul ul {
left: 110px;
top: 0px;
}
</style>
...
Eredmény*
3. példa:
Forráskód
<style type="text/css">
....
#menusor ul ul li a:link,
#menusor ul ul li a:visited
{background-color:#ffddcc; color:#662210;}
#menusor ul ul li a:hover
{background-color:#ffffff; color:#441106;}
#menusor ul ul li a:active
{background-color:#ffddcc; color:#441106;
font-size:13px;
border-bottom:2px; border-top:2px;}
</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_mmsmenu_1_OK.html