dropdown box in contact

I have the following. (Some text may be illegible if you do not have Chinese enabled)
<ul>
<li><a href=”index.html”>&#20027;&#39029;<p>Home</p></a></li>
<li><a href=”chinese.html”>&#20013;&#22269;&#23478;&#24237;<p>Chinese family</p></a></li>
<li><a href=”german.html”>&#24503;&#22269;&#20114;&#24800;&#29983;<p>German</p></a></li>
<li><a href=”english.html”>&#33521;&#22269;&#20114;&#24800;&#29983;<p>English</p></a></li>
<li><a href=”contact.html”>&#32852;&#31995;&#25105;&#20204;<p>Contact</p></a></li>
<li><a href=”myownpage.html”>&#32852;&#31995;&#25105;&#20204;<p>Myownpage</p></a
controlled by mystyle.css, part of it here:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
margin:5px
}
a:link,a:visited
{
display:block;
width:200px;
font-weight:bold;
color:#FFFFFF;
So, I basically have little green boxes linked to html pages
I would like to change it, such that, the box ‘contact’ on mouseover, or on click, I don’t mind, displays a drop down with choices which are links to ‘englishcontact’, chinesecontact’ etc
How can I best do this? Do I need Javascript? Can it be done in html??

Also in #HTML _↴