通过CSS将下拉菜单添加到模板

Question

我为网站下载了一个模板，但它只有一个基本菜单，我需要添加一个下拉列表。

不确定您需要哪些代码，请告知我是否需要发布更多代码。

这是菜单的编码，我添加了一个div类＆＃34; nav＆＃34;基于教程。所以如果我应该做一些完全不同的事情让我知道

<div class="menu">
<div class="nav">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="aboutus.html"><span>About us</span></a></li>
<li><a href="2014chefs.html"><span>2014 Chefs</span></a></li>
<li><a href="mission.html"><span>Fund the Mission</span></a></li>
<li><a href="sponsors.html"><span>Sponsors</span></a>
<ul>
<li><a href="2014sponsors.html"><span>2014Sponsors</span></a></li>
</ul>
</li>
<li><a href="family.html"><span>Ambassador Family</span></a></li>
<li><a href="photos.html"><span>Photos</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul></div>
</div>

然后这是CSS编码，我想大部分都会被复制到我的.nav中，所以它具有相同的属性。

.menu { padding:0; margin:0; width:949px; height:58px;       background:url(images/menu_bg.gif) top no-repeat;}
.menu ul { float:right; padding:0; margin:7px 30px 0 0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0;}
.menu ul li a { float:left; margin:0 1px 0 0; padding:15px 0; color:#c8c8c8; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:15px; margin:0; background:none;}
.menu ul li a:hover { color:#60b6ff; background:url(images/r_menu2.gif) no-repeat right;}
.menu ul li a:hover span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { color:#60b6ff; background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}

.nav ul ul{
display: none;}
.nav ul li: hover> ul{
display: block;}
.nav ul li{
position: relative;
display: inline-block;
float:left; 
padding:0;
margin:0px;; 
list-style:none; 
border:0;}
nav ul:after {
    content: ""; clear: both; display: block;}
.nav ul li a { float:left; margin:0 1px 0 0; padding:15px 0; display:block; color:#c8c8c8; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.nav ul li a span { padding:15px; margin:0; background:none;}
.nav ul li a:hover { color:#60b6ff; background:url(images/r_menu2.gif) no-repeat right;}
.nav ul li a:hover span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
.nav ul li a.active { color:#60b6ff; background:url(images/r_menu.gif) no-repeat right;}
.nav ul li a.active span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}