二级菜单效果（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）