jq简单的下拉菜单，有二级栏目。

<script>
$(function(){
  $("#hidea").click(function(){
    $("#hide").slideToggle("slow");
  })

$(".wlgq").click(function(){
  $(this).hasClass("nm")?$(this).removeClass("nm").siblings().removeClass("nm"):$(this).addClass("nm").siblings().removeClass("nm");
  //三元运算符，如果找到red样式那么为真执行第一个，否则执行第二个
})

})
</script>

<div class="box" id="exa">

 <div class="div"><a id="hidea" href="#">下拉</a></div>
 <div class="div_a" id="hide">
  <ul>

   <li>
   <a class="wlgq" href="#">1
     <dl>
      <dd>123</dd>
      <dd>234</dd>
     </dl>
   </a>


   <a class="wlgq" href="#">2
     <dl>
      <dd>123</dd>
      <dd>234</dd>
     </dl>
   </a>

   <a class="wlgq" href="#">3
     <dl>
      <dd>123</dd>
      <dd>234</dd>
     </dl>
   </a>

      <a class="wlgq" href="#">3
     <dl>
      <dd>123</dd>
      <dd>234</dd>
     </dl>
   </a>

  </li>

  </ul>
 </div>

</div>

<style>
body{ margin:0; padding:0;}
.box{ float:left; margin-top:10px; margin-left:10px;}
.div{ width:100px; height:30px; line-height:30px; background:#F00; color:#FFF; text-align:center; margin:0 auto;}
.div_a{ width:98px; border:1px solid #eee; overflow:hidden; display:none;}
.div_a ul{ margin:0; padding:0;}
.div_a li{ width:100%; float:left; line-height:30px; list-style:none; text-align:center; border-bottom:1px solid #eee;}
.div_a li a{width:100%; float:left;}
.div_a li dl{ margin:0px; padding:0;}
.div_a li dd{ float:left; margin:0 0px 0 0px; text-align:left; width:100%; text-indent:20px;}
.show{display: block;}
.hide{display: none;}
.wlgq{ height: 30px; overflow: hidden;}
.nm{height:auto;}
</style>