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,设置后动画效果不对。需要找原因。不加的时候动画效果正常。