SOURCE

$(function() {

  $(".nav p").click(function() {
    var ul = $(".new");
    if (ul.css("display") == "none") {
      ul.slideDown();
    } else {
      ul.slideUp();
    }
  });

  $(".set").click(function() {
    var _name = $(this).attr("name");
    if ($("[name=" + _name + "]").length > 1) {
      $("[name=" + _name + "]").removeClass("select");
      $(this).addClass("select");
    } else {
      if ($(this).hasClass("select")) {
        $(this).removeClass("select");
      } else {
        $(this).addClass("select");
      }
    }
  });

  $(".nav li").click(function() {
    var li = $(this).text();
    $(".nav p").html(li);
    $(".new").hide();
    /*$(".set").css({background:'none'});*/
    $("p").removeClass("select");
  });
})

<div class="nav mal_30">
  <p class="set">
    点击的栏目
  </p>
  <ul class="new">
    <li>
      选项1
    </li>
    <li>
      选项2
    </li>
    <li>
      选项3
    </li>
  </ul>
</div>

li {
  text-decoration: none;
}

ol,
ul,
li,
dl,
dt,
dd {
  list-style: none;
}

p,
ul,
li {
  margin: 0;
  padding: 0;
}

.nav {
  width: 300px;
  height: 27px;
  margin-bottom: 100px;
}

.nav p {
  display: block;
  padding-left: 10px;
  line-height: 27px;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  behavior: url(../js/PIE.htc)\9;
}

.set {
  background: url(../img/btn_2.png) 271px 0 no-repeat;
}

.select {
  background: url(../img/btn_1.png) 271px 0 no-repeat;
}

.new {
  /*	width:198px;*/
  position: absolute;
  border: 1px solid #e2e2e2;
  display: none;
}

.nav ul li {
  line-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

.nav ul li:hover {
  background: #49c8f2;
  color: #fff;
}