您的位置：首页 > 运维架构 > 网站架构

电商网站分类导航效果--CSS实现（一）一级菜单

2016-04-27 13:29 881 查看

<title>导航菜单</title>
<style>
*  {  padding: 0px;  margin: 0px;  font-size: 14px;  }
.menu  {  width: 216px;  margin-left: 100px;  border: 2px solid #E4393C;  }
.title  {  height: 40px;  line-height: 40px;  background-color: #E4393C;  padding-left: 20px;  }
.title a  {  color: white;  text-decoration: none;  font-weight:bold;  }
.title01  {  height: 30px;  line-height: 30px;  padding-left: 10px;
background: url("images/2.png") no-repeat right center;  z-index:3;  } /*为后面的悬浮层做准备*/
.title01 a  {  color: #313131;  text-decoration: none;  font-size: 13px;  }
.title01 a:hover  {  text-decoration: underline;  font-weight:bold;  color: #E4393C;  }
.title01:hover  {  border: 1px solid #ddd;  border-right: none;
-webkit-box-shadow: 0 0 8px #ddd;    /*阴影外发光效果*/
-moz-box-shadow: 0 0 8px #ddd;
box-shadow: 0 0 8px #ddd;  }
.title01:hover .show_menu  {  display: block;  }
.title01:hover span    {    /*添加空标签span来形成遮罩层挡住边框线*/
width: 25px;  height: 30px;  background-color: #fff;
position: relative;  z-index:10;  float: right;  right: -2px;  }
.show_menu   {  display: none;  position: absolute;  z-index:4;  top: 42px;  left: 318px;
border: 1px solid #ccc;  width: 715px;  background: #fff;  }
.left_div  {  width: 400px;  float: left;  margin: 0 5px;  }
.right_div  {  width: 300px;  float: left;  background-color: greenyellow;  margin: 0 2px;  }
</style>
</head>
<body>
<div class="menu">
<div class="title"><a href="#">全部商品分类</a></div>
<div class="title01"><a href="#">图书、音像、数字产品</a><span></span>
<div class="show_menu">
<div class="left_div">
左侧分类区域<br/>
左侧分类区域<br/>
</div>
<div class="right_div">
右侧分类区域<br/>
右侧分类区域<br/>
</div>
</div>
</div>

总结：
1，用div来写导航
2，box-show来添加发光阴影效果
3，span空标签来写遮罩层，形成直通的效果
4，通过绝对定位的方式position和z-index的属性来形成遮罩效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

电商网站分类导航效果--CSS实现（一） 一级菜单

电商网站分类导航效果--CSS实现（一）一级菜单