电商网站分类导航效果--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，其他一些基本的样式设置