CSS--利用CSS实现一个简易的二级菜单(仿京东)
2015-08-20 22:23
666 查看
功能:仿照京东首页,利用CSS简单实现一个二级菜单
完整代码:
完整代码:
<pre name="code" class="javascript"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .outer-div { border-bottom: 1px solid darkgray; background-color: lightgray; height: 30px; } .inner-div { margin: 0 auto; width: 600px; } .inner-div>ul { float: left; } .inner-div>ul>li { list-style-type: none; float: left; text-align: center; font-size: 12px; line-height: 30px; } .space { width: 1px; height: 12px; background-color: dimgray; margin: 9px 3px 3px 3px; } a { text-decoration: none; color: darkslategray; } a:hover { color: darkred; } .content { position: relative; } .first-title { width: 85px; } .content>div { border-left: 1px solid lightgray; border-right: 1px solid lightgray; } .arrow { transition: transform 0.2s linear; } .content:hover>div { display: block; background-color: whitesmoke; border-left: 1px solid lightgray; border-right: 1px solid lightgray; } .content:hover .arrow { transform-origin:center 6px ; transform: rotate(180deg); } .first-list { display: none; position: absolute; width: 110px; height: 60px; border-width: 0px 1px 1px 1px; border-color: lightgray; border-style: solid; } .customer>div:last-child { height: 130px; width: 85px; } .arrow { display: inline-block; position: absolute; top: 10px; left: 70px; width: 0px; height: 0px; border-top: 4px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid darkgray; } </style> </head> <body> <div class="outer-div"> <div class="inner-div"> <ul> <li class="content"> <div class="first-title"> <a href="javascript: void(0)">我的淘宝</a> <div class="arrow"></div> </div> <div class="first-list"> <p><a href="javascript: void(0)">已买到的宝贝</a></p> <p><a href="javascript: void(0)">已卖出的宝贝</a></p> </div> </li> <li class="space"></li> <li class="content"> <div class="first-title"> <a href="javascript: void(0)">收藏夹</a> <div class="arrow"></div> </div> <div class="first-list"> <p><a href="javascript: void(0)">收藏的宝贝</a></p> <p><a href="javascript: void(0)">收藏的店铺</a></p> </div> </li> <li class="space"></li> <li class="content customer"> <div class="first-title"> <a href="javascript: void(0)">客服服务</a> <div class="arrow"></div> </div> <div class="first-list"> <p><a href="javascript: void(0)">帮助中心</a></p> <p><a href="javascript: void(0)">售后服务</a></p> <p><a href="javascript: void(0)">售后服务</a></p> <p><a href="javascript: void(0)">售后服务</a></p> </div> </li> </ul> </div> </div> </body> <script type="text/javascript"> </script> </html>
相关文章推荐
- 纯CSS3代码实现表格奇偶行异色,鼠标悬浮变色
- CSS中列表样式的简介
- Web前端从入门到精通-9 css简介——盒模型1
- css基础精华05
- css基础精华04
- css基础精华03
- css基础精华02
- float是什么?浮动在CSS中的作用
- Css fixed和absolute定位区别
- drupal_get_css -- drupal
- CSS3属性
- 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律
- 转载于山边小溪的博客--编写跨浏览器兼容的 CSS 代码的金科玉律
- css 中visibility:hidden和display:none有什么区别呢
- 兼容所有浏览器的CSS3圆角
- CSS3:animation动画
- CSS清除浮动大全共8种方法
- CSS Hack技术介绍及常用的Hack技巧集锦
- css常用效果总结
- css多栏自适应布局