menu met hover

[Verwijderd]

mijn vraag: ik ben een site aan het maken en ik wil graag een menu maken met een hover effect. Ik wil graag dat als ik met de muis over een woord ga in het menu, dat het menu dan naar beneden valt, dus een soort dropdown. Het probleem is dat ik bij deze opdracht van school alleen html en css mag gebruiken.

dit is wat ik tot nu toe heb van het menu:

html:

<div id="menu">
<ul>
<li> <a href="../index.html"> home</a></li>
<li> <a href="about_us.html">about us</a></li>
<ul class="n2">
<li class="n2"> <a href="mission.html"> mission </a> </li>
<li class="n2"> <a href="history.html"> history </a> </li>
<li class="n2"> <a href="testimonials.html"> testimonials </a> </li>
<li class="n2"> <a href="clients.html"> clients </a> </li>
</ul>
<li> <a href="course.html"> course</a></li>
<ul class="n2">
<li class="n2"> <a href="course content.html"> content</a></li>
<li class="n2"> <a href="you will learn.html"> goals</a></li>
<li class="n2"> <a href="registration form.html"> registration</a></li>
</ul>
<li> <a href="contact.html"> contact</a></li>
<li> <a href="sitemap.html">sitemap</a></li>
</ul></div>

css:

#menu{
font-family:Verdana, Geneva, sans-serif;
position:relative;
font-size:14px;
width:120px;
height:125px;
top:30px;
left:0px;
}

#menu a:link{
color:#000;
}

#menu a:visited{
color:#000;
}

#menu li{
list-style-type:none;
padding: 5px;
}

#menu li a{
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
line-height:45px;
display:block;
background-color:#333;
text-align:center;
border: thin solid #000;
}

#menu li a:hover{
background-color:#999;
}

#menu ul{
margin:0px;
padding:0px;
}

#menu ul li.n2{
visibility:hidden;
display:none;
margin-bottom:0px;
margin-top:10px;
margin-left:30px;
}

#menu ul li.n2:hover{
visibility:visible;
display:block;
}


#menu ul .nobottom{
border-bottom: none;
}


thanks.

[HuHu]

Ja, en nu? Nu moeten wij het gaan maken voor je ofzo? Ik wil wel een offerte sturen.

[Fishlip]

Code graag tussen code tags.

Je kunt het dan toch zo maken. Dat je de achtergrond van de link bij een hover veel hoger maakt? Of moet er ook echt een submenu komen?

zet dan ook meteen een relevant linkje naar de UBB faq

[ Voor 29% gewijzigd door BtM909 op 31-10-2009 15:13 ]

[marqram]

voor een dropdown menu zijn meestal toch wel een paar regeltjes javascript nodig. Met alleen html en css lukt dat waarschijnlijk niet.

[MsG]

typ maar es bij google CSS hover in.

[BtM909]

Hallo floorvdp,

Ten eerste welkom op GoT, we zijn blij dat je je weg hebt gevonden naar ons forumpje en ook nog eens de juiste plek hebt gevonden om je vraag hier neer te zetten

Je mag best een schoolopdracht hier posten, maar ik mis behoorlijk wat zaken in je startpost. Je geeft niet aan waar je op hebt gezocht, wat je hebt gevonden en waarom dat geen oplossing was. Daarnaast geef je ook niet aan waar je precies vastloopt met je code en waar dat (denk je) aan ligt... Dit zijn essentiële dingen die we graag in een topicstart zien, dus ik ben helaas genoodzaakt je topic te sluiten.

Ik wil je nog wel even op weg helpen:
[google=CSS dropdown menu]

Success