How Do I Make A Dropdown Meny In A Topbar?

See more:

CSS

HTML

I have a html code where i have a div with 4 options: Frontppage, achive, photo and about us. Under the archive option i would like a dropdown meny with multiple choises. I would like those choises to look the same as the archive (the same background and hover effect)

Help me please. And if you don't understand my question fully just ask and i can explain more.

THIS IS MY HTML CODE RIGHT NOW:

<div id="header">
    <ul class="top">
	<li class="top"><a class="top" href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\hemsida1.html">Startsida</a>
	<li class="top"><a class="top" href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\arkivsida.html">Arkiv</a>
	<li class="top"><a class="top" href="C:\Users\reblar1226\Documents\Webbutveckling\Gyarbete\fotosida.html">Foto</a>
	<li class="top"><a class="top" href="#">Om oss</a>
    </ul>
</div>

THIS IS MY CSS CODE RIGHT NOW:

ul.top{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

a:link.top, a:visited.top{
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background: url(http://www.iiti.ac.in/Public_Relations/images/greySemiTransparentBox.png);
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

li.top{
float: left;
margin-left: 85px;
}

a:hover.top, a:active.top{
background: url(http://nffp.com.sa/Style%20Library/AdventureWorks/background.png?Mobile=1&Source=%2F_layouts%2Fmobile%2Fview.aspx%3FList%3D93b404c4-87bd-4842-a167-abe138472ec5%26View%3D904edebc-4d5e-4078-8748-85c57486acab%26RootFolder%3D%252FStyle%2520Library%252FAdventureWorks%26CurrentPage%3D1);
}`