Az első példában:
- A HTML kódot kiegészítjük egy újabb lista szinttel.
A második példában:
- Beállítjuk menüdoboz jellemzőit, és eltüntetjük a listajeleket.
A harmadik példában:
- Menüdobozunkat a sarkak lekerekítésével és árnyékolással tesszük egy kicsit érdekesebbé.
1. példa:
Forráskód
....
<div id="balmenu">
<ul>
<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="#">Termékek</a>
<ul>
<li><a href="#">Kategória 1</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 1</a></li>
<li><a href="#">Kategória 1</a></li>
</ul>
</li>
</ul><br>
</div> ...
Eredmény*
2. példa:
Forráskód
<style type="text/css">
.....
#balmenu {position:absolute; display:block;
top:80px; left:0; width:100px;
background-color:#662210; color:#ffddcc;}
#balmenu ul {list-style-type: none; margin:0;
padding:0px;}
#balmenu li {list-style-type: none;
padding:0px;}
</style>
...
Eredmény*
3. példa:
Forráskód
<style type="text/css">
....
#balmenu {border-radius: 1px 15px 1px 15px;
box-shadow: 3px 3px 5px 0px #441108;
text-align:center;}
</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_fmenu_1_OK.html