How to create HTML/CSS Submenus on menu hover

See more:

menu

HTML5

I am developing a wesbite for which I have horizontal menues but I want to create vertical submenus on mouse hover...

Here problem is that, I have basic knowledge of HTML/CSS, I am ASP.NET developer, For this website I have downloaded a very basic Web Template. There are example online about this but they are not working with the template I have.

Somebody could help me out to create simple hover submenu with my template...

Below is the HTML MENU SNIPPET...

body {margin:0;padding:0;line-height: 1.5em;background: #fff;font: 76%/160% verdana, arial, helvetica, sans-serif;color: #000;letter-spacing: 1px;}

#header {background-color: #f5f5dc;padding-top: 20px;font-size: 2.2em;font-weight: normal;letter-spacing: 20px;height: 40px;text-align: center;border-bottom: 1px solid #000; color:Orange}

ul#navtop {background-color: #f5f5dc;margin: 0; padding: 10px 0 10px 30px;white-space: nowrap;border-bottom: 1px solid #000;}

/*Navigation Styles*/

#navtop li {display: inline;list-style-type: none;}

#navtop a {padding: 3px 10px;}

#navtop a:link, #navtop a:visited {color: #000;text-decoration: none;border: 1px solid #f5f5dc;outline:none; color:Red}

#navtop a:hover{color: #000;background-color: #f9f9ea;text-decoration: none;border: 1px solid #000;}

.navbottom {margin-left: 0;padding-left: 0;}

#maincontainer {width: 600px;margin: 50px auto;}

#contentwrapper {float: left;width: 100%;}