html部分，主要用到的是ul，li标签

css部分，主要用到的是display：none；a:hover{};

jQuery部分，主要用到的是$().hover();然后通过属性获取内容，并改变display的属性，none，或者block；

代码如下：

<!DOCTYPE html>
 
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <title>下拉菜单</title>
 <script src="js/jquery-1.11.0.min.js"></script>
 <style>
     *{padding: 0;margin: 0;font-family: '微软雅黑';}
     .nav>li{float: left;list-style: none;margin-left:2px;}
     .nav li>a{text-decoration: none;color: #000;display: block;width: 100px;height: 45px;line-height: 45px;text-align:                        center;background: #ccc;}
     .nav li>a:hover{color: #808080;background: #f60;}
     .nav{width: 800px;margin:0 auto; }
     .sub{display: none;background: #ccc;height: 120px;}
     .sub>li{list-style: none;font-size: 16px;}
     .sub>li a{height: 23px;line-height: 23px; color: #fff;border-bottom: 1px dashed #fff;display: block;} 
     .sub>li a:hover{background: #00e500;color: #fff;}
 </style>
 </head>
 <body>
     <ul class="nav">
         <li>
              <a href="#">网站首页</a>
                <ul class="sub">
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
               </ul>
         </li>
         <li>
            <a href="#">网站首页</a>
               <ul class="sub">
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
                     <li><a href="#">二级页面</a></li>
              </ul>
         </li>
         <li>
             <a href="#">网站首页</a>
                <ul class="sub">
                    <li><a href="#">二级页面</a></li>
                    <li><a href="#">二级页面</a></li>
                    <li><a href="#">二级页面</a></li>
                    <li><a href="#">二级页面</a></li>
              </ul>
        </li>
        <li>
             <a href="#">网站首页</a>
                <ul class="sub">
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
                      <li><a href="#">二级页面</a></li>
               </ul>
        </li>
        <li>
            <a href="#">网站首页</a>
              <ul class="sub">
                 <li><a href="#">二级页面</a></li>
                 <li><a href="#">二级页面</a></li>
                 <li><a href="#">二级页面</a></li>
                 <li><a href="#">二级页面</a></li>
              </ul>
        </li>
     </ul>
 <script>
        $(document).ready(function(){

            $('.nav>li').hover(function(){
            $(this).find('.sub').css('display','block');
       },function(){
            $('.nav>li').find('.sub').css('display','none');
     })
 })
 </script>
 </body>
 
</html>

如遇代码有问题，欢迎指正。