jQuery结合ul和li下拉菜单源码下载

下拉菜单一般都会结合ul和li实现的，本章节分享的就是一段这样的代码，希望能给需要的朋友带来帮助。

代码如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</title>
<style type="text/css">
ul, ol, li{
  list-style:none;
  padding:0px;
  margin:0px;
}
#menu *{line-height:30px;}
#menu a{
  text-decoration:none;
  display:block;
}
#menu ul{
  text-align:left;
  background:#333;
}
#menu .arrow{
  float:right;
  padding-right:5px;
}
#menu>ul{height:30px;} 
#menu>ul>li{
  text-align:center;
  display:inline-block;
  width:80px;
}
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{background:#666;}
#menu>ul>li ul{
  display:none;
  width:150px;
  position:absolute;
  background:#c1cd94;
  box-shadow:2px 2px 2px #000;
  -webkit-box-shadow:2px 2px 2px #000;
  -moz-box-shadow:2px 2px 2px #123;
}
#menu>ul>li>ul li{
  padding-left:5px;
  position:relative;
}
#menu>ul>li>ul li>a{color:#000;}
#menu>ul>li>ul li:hover{background:#d3dbb3;}
#menu>ul>li>ul>li ul{
  left:150px;
  top:0px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript">
$(document).ready(function(){ 
  $('#menu>ul>li>ul').find('li:has(ul:not(:empty))>a').append("<span class='arrow'>></span>");
  $("#menu>ul>li").bind('mouseover',function(){ 
    $(this).children('ul').slideDown('fast'); 
  }).bind('mouseleave',function(){ 
    $(this).children('ul').slideUp('fast'); 
  }); 
  $('#menu>ul>li>ul li').bind('mouseover',function(){ 
    $(this).children('ul').slideDown('fast'); 
  }).bind('mouseleave',function(){ 
    $(this).children('ul').slideUp('fast'); 
  }) 
}); 
</script>
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="">菜单一</a>
      <ul>
        <li><a href="">子菜单1</a></li>
        <li><a href="">子菜单2</a>
          <ul>
            <li><a href="">子菜单7</a></li>
          </ul>
        </li>
        <li><a href="">子菜单3</a></li>
      </ul>
    </li>
    <li><a href="">菜单二</a>
      <ul>
        <li><a href="">子菜单4</a></li>
        <li><a href="">子菜单5</a></li>
        <li><a href="">子菜单6</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

代码描述：jQuery结合ul和li 下拉菜单。jQuery结合ul和li下拉菜单源码下载

下载全部收藏

105 140

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册