前几天做了个作业，要求到给二级菜单加个阴影，可把人给难住了。
后来偶像给了个方法。
先做出二级菜单。这一步应该比较容易。做法不多说了，因为方法比较多。
现在我这里是这样做的，先给li里面来两个div，然后第一个和li大小一样，第二个div是二级菜单的大小。
设li为相对位置。然后，二级菜单的div为绝对位置，display：none；当hover到li的时候二级div显示出来。
这是我个人比较习惯的方法。
当给下面的二级div加阴影的时候，此div的阴影会有部分出现在一级菜单的上面。给上面一级菜单也加上阴影的话，也会存在二级的阴影在一级div上的显示
那么下面是加阴影的一种方法。
在上面的例子中，让一级div也设置成绝对定位。再次给li加个div（此div是这里称为shadow），给先添加的div一个阴影，二级div一个阴影。一级div不要阴影。然后让一级div的z-index设置大一点，使其在一级div和shadow-div之上。让二级div的margintop为负数，大概一两个像素就可以。然后，设置一级div的背景颜色和二级的背景色一样，一级div的border-bottom为none；这样就可以了，如果没看懂，看下面的代码。
这里，可以吧一级div换成p，span。都可以。。。
css部分的代码：* {margin:0;padding:0;} ul { list-style-type: none; } ul li { float: left; } .list { margin: 100px; } .list-li { position: relative; margin: 5px; width: 100px; border: 1px solid red; text-align: center; } .item { position: absolute; border: 1px solid grey; right: 0; top: 38px; width: 180px; padding: 10px; display: none; background: white; } .title { position: absolute; border: 1px solid transparent; padding: 10px; width: 78px; background-color: white; } .list-li:hover .item { display: block; box-shadow: 0px 0px 10px 2px grey; } .list-li:hover .title { border: 1px solid grey; border-bottom: none; z-index: 5; } /*.shadow {*/ position: absolute; border: 1px solid transparent; width: 98px; height: 34px; display: none; z-index: -9; } /*.list-li:hover .shadow {*/ box-shadow: 0px 0px 10px 2px grey; display: block; z-index: -9; }；；；；；；
body部分的代码
<ul class="list"> <li class="list-li"> <p class="title">客户服务</p> <div class="shadow"></div> <ul class="item"> <li> <h3>很要漂亮</h3> <p>按钮好看</p> <p>导航栏好看</p> </li> <li>萌萌哒</li> <li>么么哒</li> </ul> </li> <li class="list-li"> <p class="title">一级菜单</p> <div class="shadow"></div> <ul class="item"> <li> <h3>很要漂亮</h3> <p>按钮好看</p> <p>导航栏好看</p> </li> <li>萌萌哒</li> <li>么么哒</li> </ul> </li> <li class="list-li"> <p class="title">一级菜单</p> <div class="shadow"></div> <ul class="item"> <li> <h3>很要漂亮</h3> <p>按钮好看</p> <p>导航栏好看</p> </li> <li>萌萌哒</li> <li>么么哒</li> </ul> </li> </ul>
原文：http://www.cnblogs.com/seeyouagain/p/5041507.html