Make an attractive drop down list

Create an attractive drop down menu using html and css

make an html file named index.html

 
<div id="nav">
    <div id="home" class="onnav"><a href="#">Home</a>
        <div id="list1" class="list">
    <ul>
        <li><a href="#">Home1</a></li><br>
            <li>Home2</li><br>
            <li>Home3</li><br>
            <li>Home4</li>
        </ul>
    </div>
        </div>
        <div id="product" class="onnav"><a href="#">Product</a>
        <div id="list2" class="list">
    <ul>
        <li>Product1</li><br>
            <li>Product2</li><br>
            <li>Product3</li><br>
            <li>Product4</li>
        </ul>
    </div>
        </div>
        <div id="gallery" class="onnav"><a href="#">Gallery</a>
        <div id="list3" class="list">
    <ul>
        <li>Gallery1</li><br>
            <li>Gallery2</li><br>
            <li>Gallery3</li><br>
            <li>Gallery4</li>
        </ul>
    </div>
        </div>
        <div id="sitemap" class="onnav"><a href="#">Site Map</a>
        <div id="list4" class="list">
    <ul>
        <li>Sitemap1</li><br>
            <li>Sitemap1</li><br>
            <li>Sitemap1</li><br>
            <li>Sitemap1</li>
        </ul>
    </div>
        </div>
        <div id="aboutus" class="onnav"><a href="#">About Us</a>
        <div id="list5" class="list">
    <ul>
        <li>About us</li><br>
            <li>About us</li><br>
            <li>About us</li><br>
            <li>About us</li>
        </ul>
    </div>
        </div>
        <div id="contactus" class="onnav"><a href="#">Contact Us</a>
        <div id="list6" class="list">
    <address>Vill. Mahilo,Post-jawa,<br>Dist rewa Mp</address>
    </div>
        </div>
        <div id="joinus" class="onnav"><a href="#">Join/Login</a>
        <div id="list7" class="list">
    <ul>
        <li>Login</li><br>
            <li>Join Us</li><br>
           
        </ul>
    </div>
        </div>
    </div>


and the css file would be


body
{
  background-color:gray;
  color:white;
}
#nav
{
background-color:#333;
width:1216px;

height:auto;
margin:auto;
-webkit-border-radius:5px;
padding-left:10px;
text-align:center;
}
a
{
text-decoration:none;
color:white;
}
#home
{
margin-left:50px;}
#product
{
margin-left:190px;
margin-top:-35px;

}
#gallery
{
margin-left:330px;
margin-top:-35px;

}
#sitemap
{
margin-left:470px;
margin-top:-35px;

}
#aboutus
{
margin-left:610px;
margin-top:-35px;

}
#contactus
{
margin-left:750px;
margin-top:-35px;

}
#joinus
{
margin-left:890px;
margin-top:-35px;
}

.onnav
{

height:25px;
width:140px;
padding:5px;

}
.onnav:hover
{
background-color:#000;
font-size:17px;
box-shadow:0px -6px 12px #CCCCCC;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.list
{
background:rgba(0,0,0,0.86);
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
width:300px;
padding:10px;
margin-top:10px;
margin-left:-4px;
display:none;
position:absolute;
z-index:100;
}

ul li
{
list-style:none;
}
#home:hover #list1
{
display:block;
}
#product:hover #list2
{
display:block;
}
#gallery:hover #list3
{
display:block;
}
#sitemap:hover #list4
{
display:block;
}
#aboutus:hover #list5
{
display:block;
}
#contactus:hover #list6
{
display:block;
}
#joinus:hover #list7
{
display:block;
}