Demó:

• Menüpont
• Menüpont
• Menüpont

Ennek a menünek az a lényege, hogy a sötét és világos színek játszásával olyan hatást kelt, mintha kicsit kiemelkedne a menüpont, mikor rávisszük az egeret.

HTML:
Ezt a kódot kell abba a modulba tenned, ahová szeretnéd a menüdet rakni. Értelemszerűen az URL helyére megy a menüpontod URL-je, a Menüpont helyére pedig a menüpont neve.

<ul class="buttonmenu">
    <li><a href="http://www.URL">Menüpont</a></li>
    <li><a href="http://www.URL">Menüpont</a></li>
    <li><a href="http://www.URL">Menüpont</a></li>
</ul>

Amennyi menüpontot szeretnél, annyiszor rakd egymás alá a
    <li><a href="http://www.URL">Menüpont</a></li>
sort, de arra ügyelj, hogy az elején maradjon az <ul class sor, s a végét a </ul> zárja.

CSS:
Itt adhatod meg a menü színét, méretét. A legfontosabb részeket jelöltük a kódban, ezt nem kell kitörölnöd belőle. Ha csak egyszer használod ezt a menüt az oldaladon, akkor a CSS mehet nyugodtan abba a modulba, amelyikben a menüd van; de ha többször használnád, akkor bal/jobb oldali modulba rakd. Arra figyelj, hogy ahol írjuk, hogy világos szín, ott világost adj meg, a sötétnél pedig sötétet.

<style type="text/css">
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 140px;    /* menü szélessége */
font-size: 8pt;   /* menüpontok mérete */
}
.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0;   /* világos sötét sötét világos - így add meg a színeket */
background-color: #704968;    /* sötét háttérszín */
text-decoration:none;
}
.buttonmenu li a:visited{
color: #ffffff;   /* menüpont színe, ha ráviszik az egeret, világos szín legyen */
}
.buttonmenu li a:hover, .buttonmenu li a:active{
color: #000000;   /* menüpont színe, sötét szín legyen */
background-color: #CDB4C8;    /* világos háttérszín */
}</style>