Drop down menu on hover of klikken?

Hallo,

Weet iemand hoe ik een drop down menu kan maken met een gratis template van chocolatemonster die ik heb gevonden?


De css code

#navigation { height: 52px; padding-top: 4px; font-family: 'Ubuntu', sans-serif; font-weight: 700; background: url(images/navigation.png) repeat-x 0 0; box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px -1px 2px rgba(0,0,0,0.1); -o-box-shadow: 0px -1px 2px rgba(0,0,0,0.1);  }
#navigation ul { list-style: none; list-style-position: outside; }
#navigation ul li { float: left; padding-right: 2px; line-height: 52px; background: url(images/nav-border.png) no-repeat right 0;  font-size: 13px; text-transform: uppercase; }
#navigation ul li a { display: block; padding: 0 32px 0 28px; color: #878787;  }
#navigation ul li a:hover,
#navigation ul li.active a  { text-decoration: none; color: #2b9208; }
#navigation ul li.first a { padding-left: 38px; }
#navigation a.nav-btn { display: none; }

Het menu

<nav id="navigation">
					<a href="#" class="nav-btn">HOME<span class="arr"></span></a>
					<ul>
						<li class="active"><a href="#">HOME</a></li>
						<li><a href="#">Service</a></li>
						<ul> 
						<li><a href="#">Binnen </a></li>
						<li><a href="#">Buiten</a></li>
						</ul>
						<li><a href="#">contact</a></li>
						<li><a href="#">locatie</a></li>
						<li><a href="#">about</a></li>
						<li><a href="#">Test</a></li>
					
					</ul>
				</nav>

Wat ik wil krijgen is dat wanneer ik de menu aanklik of eroverheen "hover" dat er dan een submenu onder verschijnt. Ik hoop dat dit duidelijk is!