二级菜单效果（3）

最近写了个二级菜单，代码非常简单干净，不过也是建立在jquery基础上

 

效果图：

 

 

<script type="text/javascript">
      $(function(){
        $(".col").hover(function(){
          $(".col").removeClass("hover");
          $(this).addClass("hover");
          $(".col ul").hide();
          $(this).children("ul").show();
        },function(){ $(".col ul").hide(); })
      })
</script>

 

<style type="text/css">
      *{margin:0;padding:0;}
      body{padding:100px;}
      .colbox{width:554px;height:40px;}
      .colbox .col{width:136px;line-height:38px;background-color:#c3c3c3;border:2px solid #000;float:left;text-align:center;margin-right:-2px;}
      .colbox .col p{cursor:pointer;font-size:16px;font-weight:bold;}
      .colbox .col ul{display:none;}
      .colbox .col li{list-style:none;border-top:1px solid #000;cursor:pointer;}
      .colbox .col li a{font-size:14px;text-decoration:none;display:block;height:38px;}
      .colbox .col li a:hover{background-color:#c3c3c3;}
      .colbox .hover{background:#eee;}
 </style>

 

<div class="colbox">
        <div class="col">
          <p>ice-cream1</p>
          <ul>
            <li><a href="">blog1</a></li>
            <li><a href="">blog2</a></li>
            <li><a href="">blog3</a></li>
          </ul>
        </div>
		<div class="col">
          <p>ice-cream2</p>
          <ul>
            <li><a href="">blog112</a></li>
            <li><a href="">blog2</a></li>
            <li><a href="">blog3</a></li>
          </ul>
        </div>
		<div class="col">
          <p>ice-cream3</p>
          <ul>
            <li><a href="">blog1564</a></li>
            <li><a href="">blog2</a></li>
            <li><a href="">blog3</a></li>
          </ul>
        </div>
		<div class="col">
          <p>ice-cream4</p>
          <ul>
            <li><a href="">blog17875</a></li>
            <li><a href="">blog2</a></li>
            <li><a href="">blog3</a></li>
          </ul>
        </div>
</div>

 

demo code download

 

类似效果：

二级菜单效果（1）

二级菜单效果（2）