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

/*二级菜单样式*/.show_menu{    display: none;  position: absolute;  z-index:4;  /*设置悬浮效果*/    top: 42px;  left: 318px;  border: 1px solid #ccc;    width: 715px;  background: #fff;  }  /*添加背景颜色为了遮住红色边框颜色*/.left_div  {  width: 495px;  float: left;  margin: 0 5px;  }.right_div  {  width: 200px;  float: left;  margin: 0 5px; }/*二级菜单内部样式*/.left_div dl  {  border-bottom: 1px solid #eeeeee;  padding-bottom: 2px;    overflow: hidden;  margin-top: 2px;  }    /*overflow是防止字数过多超出*/.left_div dl dt  {  display: block;  width: 60px;    float: left;  text-align: right;  height: 22px;    line-height: 22px;  padding-right: 8px;  }.left_div dl dt a {  color: #E4393C;  font-weight:bold;  text-decoration: underline;  }.left_div dl dd {  display: block;  overflow: hidden;  }.left_div dl dd a{    display: block;  float: left;  border-left: 1px solid #cccccc;    /*a不是块级元素*/    color: #737373; padding: 0px 8px;  height: 14px;  /*行高和前面不一样是为了解决后面的多行问题*/    line-height: 14px;  margin: 6px 0;            /*通过调节内外边距来对齐*/}.right_div dl {  margin-top: 6px;  }.right_div dl dd a:hover{  color: #313131;  font-weight:normal;  text-decoration: none;  }总结：1，左右分区，dl,dt,dd利用浮动来达到一行显示2，竖线用边框实现3，其他一些基本的样式设置