HTML <body>部分代码部分：
<div class="wrap0">
<div class="top w1260 " id="top">
<div class="top-right fr">
<ul class="menu">
<li class="call">
<div class="text">
电话
<span></span>
</div>
<div class="details">嘿嘿</div>
</li>
<li class="team">
<div class="text">合作伙伴
<span></span>
</div>
</li>
</ul>
</div>
</div>
</div>
第一步，初识样式：
wrap0 -> 设置100%宽度，28高度，背景颜色:#fafafa，1px的下边框颜色#eee
ul.menu>li -> 设置左浮动，位置相对定位
ul.menu>li.call -> 设置不同子元素的宽度
ul.menu>li.team ->设置不同子元素的宽度
ul.menu>li div.text用来放置默认显示的菜单内容
ul.menu>li div.text -> 设置文字居中，行高28px，颜色，字体14px
ul.menu>li div.text span ->设置下拉箭头的样式
ul.menu>li div.text span{ width:10px; height:5px; background:url(style/top_bg.png) -15px -5px; display:block; position:absolute; right:0; top:13px;}
第二步：
ul.menu>li.call div.details{ width:200px; height:100px; background:#fff; position:absolute; right:0; top:28px; box-shadow:0 0 5px 0 #ccc;}
给li元素内，最后添加一个div（用来放置下拉的内容），父元素li设置相对定位，div.details设置绝对定位，右边0，上面高度=wrap0的高度。
第三步：
手工控制ul.menu>li:hover div.details显示为block，原来的元素设置为none
ul.menu>li.hover div.text{ background:#fff;} ul.menu>li.hover div.text span{ background-position:-15px 0;}
手工设置鼠标放上div.text背景变为白色，span的图标显示为下拉样式
给hover的details和text添加阴影效果box-shadow:0 0 5px 0 #ccc;
给text添加after，添加遮挡。
ul.menu>li.hover div.text:after{ content:""; display:block; width:100%; height:10px; background:#fff; position:absolute; right:0; top:22px; z-index:2; }
JavaScript代码来控制效果
<script type="text/javascript"> $(function(){ $('ul.menu>li').hover(function(){ $(this).toggleClass('hover').children('.details').finish().slideToggle(); }); }) </script>
也可以通过：hover直接添加效果，暂时不确定这样能不能添加动画效果。
有个疑问：ul.menu>li.hover div.details不能设置display;block，设置后动画效果不对。需要找原因。不加的时候动画效果正常。