1.先把上面的导航栏排好，做子菜单时一定要让nav ul li 左浮动，而不是a浮动，不然子菜单的位置不对
2./*一定要把a转换为盒子模型，不然红色的底板会紧挨着文字 display:block;*/
3.子菜单的ul用定位position:absoult;可以控制不要让子菜单把nav的整个撑起来移动下面的整理内容
4.如果出现加边框可以控制位置，去掉位置有移动可以加上绝对定位position:absoult;
5.如果做子菜单时候出现子菜单平铺在导航栏的下面一定要定义一下子菜单的ul宽高，和图片的宽高一样的即可解决此问题
6.动画的添加可以在这个里面添加
nav ul li a:hover{
width:100px;
height:36px;
background:url(imgaes/dhover4.gif) no-repeat;
-webkit-transition:all 3s ease-in 0;
}
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="keywords" content="关键字"> 6 <meta name="description" content="内容"> 7 <title>无标题文档</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 border: 0; 13 } 14 ul, ul li { 15 list-style: none; 16 } 17 nav { 18 display: block; 19 width: 960px; 20 margin: 2px auto; 21 overflow: hidden; 22 } 23 nav ul li { 24 margin: 1px; 25 float: left; 26 } 27 nav ul li a { 28 text-align: center; 29 width: 130px; 30 height: 30px; 31 line-height: 30px; 32 background-color: #C9C9A7; 33 display: block; 34 text-decoration: none; 35 font-size: 13px; 36 color: #000000; 37 border-radius: 2px; 38 } 39 nav ul li a:hover { 40 color: #fff; 41 background-color: #b3ab79; 42 } 43 nav ul li ul { 44 display: none; 45 } 46 nav ul li:hover ul { 47 display: block; 48 position: absolute; 49 width: 100px; 50 } 51 nav ul li ul li a { 52 background-color: #faeec7; 53 } 54 nav ul li ul li a:hover { 55 background-color: #dfc184; 56 } 57 nav ul li ul { 58 width: 50px; 59 position: absolute; 60 } 61 .cc { 62 background-color: #DFDFDF; 63 width: 960px; 64 height: 1000px; 65 margin: 0 auto; 66 } 67 </style> 68 </head> 69 <body> 70 <nav> 71 <ul> 72 <li><a href="">首页</a></li> 73 <li><a href="">公司简介</a> 74 <ul> 75 <li><a href="">aaaaaa</a></li> 76 <li><a href="">aaaaaa</a></li> 77 <li><a href="">aaaaaa</a></li> 78 </ul> 79 </li> 80 <li><a href="">产品中心</a></li> 81 <li><a href="">新闻动态</a> 82 <ul> 83 <li><a href="">aaaaaa</a></li> 84 <li><a href="">aaaaaa</a></li> 85 <li><a href="">aaaaaa</a></li> 86 </ul></li> 87 <li><a href="">客户留言</a></li> 88 <li><a href="">人才招聘</a> 89 <ul> 90 <li><a href="">aaaaaa</a></li> 91 <li><a href="">aaaaaa</a></li> 92 <li><a href="">aaaaaa</a></li> 93 </ul></li> 94 <li><a href="">联系我们</a></li> 95 </ul> 96 </nav> 97 <div class="cc"></div> 98 </body> 99 </html>
