jQuery实现下拉菜单
一、居中
1、块元素居中：给块元素本身设置：margin:0 auto;，块元素必须设置宽度
2、行内块元素居中：给元素父级设置text-algin:center;
?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>Title</title> ?6 ????<style> ?7 ????????*{ ?8 ????????????margin: 0; ?9 ????????????padding: 0; 10 ????????????list-style: none; 11 ????????} 12 ????????.nav{ 13 ????????????width: 100%; 14 ????????????height: 40px; 15 ????????????background: #0044DD; 16 ????????????margin: 100px auto; 17 ????????} 18 ????????.nav .item{ 19 ???????????/* font-size: 0;*/ 20 ????????????width: 606px; 21 ???????margin:0 auto; 22 ?23 ????????} 24 ????????.nav .item li{ 25 ????????????font-size: 16px; 26 ????????????width: 100px; 27 ????????????height: 40px; 28 ???????????/* display: inline-block;*/ 29 ????????????float: left; 30 ????????????line-height:40px; 31 ????????????text-align: center; 32 ????????????border-right: 1px solid #CCCCCC; 33 ????????????position: relative; 34 ????????????margin-bottom: 0; 35 ????????} 36 ?37 ????????.nav li a{ 38 ????????????text-decoration: none; 39 ????????????color: #ffffff; 40 ????????} 41 ????????.nav .item ul{ 42 ????????????position: absolute; 43 ????????????left:0; 44 ????????????top:40px; 45 ????????????display: none; 46 ????????} 47 ????????.nav .item ul li{ 48 ????????????font-size: 16px; 49 ????????????width: 100px; 50 ????????????height: 40px; 51 ????????????background-color: #2B93D2; 52 ????????????border-top:1px solid #CCCCCC; 53 ?54 ????????} 55 ????</style> 56 ????<script src="jquery-1.11.1.min.js"></script> 57 ????<script> 58 ????????$(document).ready(function(){ 59 ????????????/*$(".nav li").hover(function(){ 60 ????????????????$(this).children("ul").show(); 61 ????????????},function(){ 62 ????????????????$(this).children("ul").hide(); 63 ????????????});*/ 64 ???????????$(".item li").hover(function(){ 65 ????????????????$(this).children("ul").slideToggle(); 66 ????????????}); 67 ????????}); 68 ????</script> 69 </head> 70 <body> 71 <div class="nav"> 72 ????<ul class="item"> 73 ????????<li><a href="">网站首页</a> 74 ????????????<ul> 75 ????????????????<li><a href="">案例展示</a></li> 76 ????????????????<li><a href="">案例展示</a></li> 77 ????????????????<li><a href="">案例展示</a></li> 78 ????????????</ul> 79 ????????</li> 80 ????????<li><a href="">新闻中心</a> 81 ????????????<ul> 82 ????????????????<li><a href="">案例展示</a></li> 83 ????????????????<li><a href="">案例展示</a></li> 84 ????????????????<li><a href="">案例展示</a></li> 85 ????????????</ul> 86 ????????</li> 87 ????????<li><a href="">最新活动</a> 88 ????????????<ul> 89 ????????????????<li><a href="">案例展示</a></li> 90 ????????????????<li><a href="">案例展示</a></li> 91 ????????????????<li><a href="">案例展示</a></li> 92 ????????????</ul></li> 93 ????????<li><a href="">产品中心</a> 94 ????????????<ul> 95 ????????????????<li><a href="">案例展示</a></li> 96 ????????????????<li><a href="">案例展示</a></li> 97 ????????????????<li><a href="">案例展示</a></li> 98 ????????????</ul></li> 99 ????????<li><a href="">技术文章</a>100 ????????????<ul>101 ????????????????<li><a href="">案例展示</a></li>102 ????????????????<li><a href="">案例展示</a></li>103 ????????????????<li><a href="">案例展示</a></li>104 ????????????</ul>105 ????????</li>106 ????????<li class="last"><a href="">关于我们</a>107 ????????????<ul>108 ????????????????<li><a href="">案例展示</a></li>109 ????????????????<li><a href="">案例展示</a></li>110 ????????????????<li><a href="">案例展示</a></li>111 ????????????</ul>112 ????????</li>113 ????</ul>114 </div>115 </body>116 </html>
运行效果：
第72天：jQuery实现下拉菜单
原文地址：http://www.cnblogs.com/le220/p/7774855.html