本节教程中我们将介绍如何只使用css3创建一个漂亮的导航下拉菜单，兼容所有主流浏览器，包括ie7，ie8当然在ie7/8浏览器中一些css3特性就不支持了，比如圆角，但是整个菜单还是可以很好地显示滴。接下来开始教程~

在线演示   源码下载

第一步：HTML标签结构

这里我们使用ul无序列表来实现HTML结构，同时每一个菜单项都是一个超链接，子菜单项也是用相同的结构。

查看代码

1. <ul class="menu">
2.     <li><a href="#">首页</a></li>
3.     <li><a href="#">前端开发</a>
4.         <ul>
5.             <li><a href="#">CSS & CSS3</a></li>
6.             <li><a href="#">JS & jQuery</a></li>
7.             <li><a href="#">HTML5</a></li>
8.         </ul>
9.     </li>
10.     <li><a href="#">DOTNET</a></li>
11.     <li><a href="#">网站素材</a></li>
12.     <li><a href="#">WordPress</a></li>
13. </ul>

第二步：布局

我们为所有的菜单项移除margin, padding, border和outline，然后定义合适的宽高，添加圆角和渐变效果。为了使菜单水平显示，还需要加上左对齐浮动。最后需要加上相对定位的position，这样做是为了固定子菜单的位置。

查看代码

1. .menu ul,
2. .menu li,
3. .menu a {
4.     margin: 0;
5.     padding: 0;
6.     border: none;
7.     outline: none;
8. }
9.  
10. .menu {
11.     height: 40px;
12.     width: 410px;
13.  
14.     background: #4c4e5a;
15.     background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
16.     background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
17.     background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
18.     background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
19.     background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
20.  
21.     -webkit-border-radius: 5px;
22.     -moz-border-radius: 5px;
23.     border-radius: 5px;
24. }
25.  
26. .menu li {
27.     position: relative;
28.     list-style: none;
29.     float: left;
30.     display: block;
31.     height: 40px;
32. }

第三步：修饰菜单项链接

我们需要为菜单项加一些基础的样式color，padding，font等等。为了鼠标hover到菜单上的时候，有一个更好的效果，我们为菜单项添加文字阴影，和颜色过渡transition，最后为每个菜单想加上间隔边框，第一个移除左边框，最后一个移除右边框。当hover的时候只改变菜单链接的颜色。

查看代码

1. .menu li a {
2.     display: block;
3.     padding: 0 14px;
4.     margin: 6px 0;
5.     line-height: 28px;
6.     text-decoration: none;
7.     border-left: 1px solid #393942;
8.     border-right: 1px solid #4f5058;
9.     font-family: Helvetica, Arial, sans-serif;
10.     font-weight: bold;
11.     font-size: 13px;
12.     color: #f3f3f3;
13.     text-shadow: 1px 1px 1px rgba(0,0,0,.6);
14.     -webkit-transition: color .2s ease-in-out;
15.     -moz-transition: color .2s ease-in-out;
16.     -o-transition: color .2s ease-in-out;
17.     -ms-transition: color .2s ease-in-out;
18.     transition: color .2s ease-in-out;
19. }
20. .menu li:first-child a { border-left: none; }
21. .menu li:last-child a{ border-right: none; }
22. .menu li:hover > a { color: #8fde62; }

第四步：子菜单样式

子菜单这里我们使用绝对定位，这就是为什么我们要为第一级菜单li添加绝对定位的原因。当鼠标hover的时候我们设置透明度从0到1来实现渐变显示效果，同样是设置高度从0到36px来实现向下滑出效果。

查看代码

1. .menu ul {
2.     position: absolute;
3.     top: 40px;
4.     left: 0;
5.  
6.     opacity: 0;
7.     background: #1f2024;
8.  
9.     -webkit-border-radius: 0 0 5px 5px;
10.     -moz-border-radius: 0 0 5px 5px;
11.     border-radius: 0 0 5px 5px;
12.  
13.     -webkit-transition: opacity .25s ease .1s;
14.     -moz-transition: opacity .25s ease .1s;
15.     -o-transition: opacity .25s ease .1s;
16.     -ms-transition: opacity .25s ease .1s;
17.     transition: opacity .25s ease .1s;
18. }
19. .menu li:hover > ul { opacity: 1; }
20.  
21. .menu ul li {
22.     height: 0;
23.     overflow: hidden;
24.     padding: 0;
25.  
26.     -webkit-transition: height .25s ease .1s;
27.     -moz-transition: height .25s ease .1s;
28.     -o-transition: height .25s ease .1s;
29.     -ms-transition: height .25s ease .1s;
30.     transition: height .25s ease .1s;
31. }
32.  
33. .menu li:hover > ul li {
34.     height: 36px;
35.     overflow: visible;
36.     padding: 0;
37. }

设置子菜单的宽度为100px，同时移除左右边框，使用下边框，同时移除最后一个子菜单的下边框。

查看代码

1. .menu ul li a {
2.     width: 100px;
3.     margin: 0;
4.     border: none;
5.     border-bottom: 1px solid #353539;
6.     text-align:left;
7. }
8.  
9. .menu ul li:last-child a { border: none; }

到此教程全部结束：在线演示