Rob's web

Home - Webdesign - Opmaak - Menu's - Pulldownmenu

Pulldownmenu

Het pulldownmenu is een uitbreiding van het balkmenu. We voegen in de stylsheet na het onderstaande blok:

#menubalk li a {
text-decoration:none;
margin-right:2px;}

de volgende code in.

Met display:none voorkomen we dat submenu's zichtbaar zijn als de muis niet op de parent-item staat.

#menubalk ul li ul {
display:none;
position:absolute}

Heeft een item subitems dan valt dit onder de onderstaande code.

#menubalk ul li:hover ul {
display:block}

#menubalk ul li ul li {
float:none}

#menubalk ul li:hover ul li {
background-color:#ff0;}

Eventuele sub-sub menu's worden hiermee onzichtbaar gemaakt.

#menubalk ul li:hover ul li ul {display: none;}

De code hieronder is voor het sub-sub menu.

#menubalk ul li:hover ul li:hover ul {display:block;position:absolute;top:0;left:150px;width:150px}
#menubalk ul li:hover ul li:hover ul li a {display:block;background:#dfc184;color:#000;}
#menubalk ul li:hover ul li:hover ul li:hover a {background:#bd8d5e;color:#fff;}
#menubalk ul li:hover ul li:hover ul li ul {display:none}