以京东为例简单无延迟菜单实现（二）

以京东为例简单无延迟菜单实现（菜单样式）

.demo1{
    position: relative;    //使用相对定位
    width:200px;
    left:50px;
    top:50px;
}

记一笔：一般css定位只需写left与top两个属性，因为当一个块级未能填充满整个页面时，加入定位的left与right属性会以left为准，top与bottom同理

ul{
    padding: 0px;
    margin: 0px;
    list-style: none;    //列表样式无符号显示
    background: #6c6669;
    color: #ffffff;
    border-right-width: 0;
}

li{
   display:block;
   height:30px;
   line-height: 30px;
   padding-left: 12px;
   cursor:pointer;     //指鼠标移动至该属性上时，光标显示的样式，常见有text——光标指示文本。wait——光标指示程序正忙（通常是一只表或沙漏）。help——光标指示可用的帮助（通常是一个问号或一个气球）
   font-size: 14px;
   position: relative;
}

这里涉及两个属性：height，line-height。简单来说，line-height是行高的意思，height则是定义元素自身的高度。即line-height指一行的高度，如果因为文字关系显示为两行，则高度为两倍的line-height，而height指所渲染元素的高度。当这两个属性设置的大小相同时会产生一个效果——垂直居中。详细见CSS垂直居中的11种实现方式

.cate_menu{
   font-size: 14px;
   color: #ffffff;
   text-decoration: none;     //设置超链接样式，此处为去除下划线
}

li.active{
   color: #0f24dd;
}
li a:hover{
   background: #c81623;
}

hover为一个伪类，效果为鼠标移动至上方产生效果,注意：.active以为对active的类产生效果，而:active则为对鼠标按下后显示，因为active本身属于一个伪类，即标签本身存在这个active

.none{
   display: none;
}

none的属性想必很显然都知道就是不显示

• display:block;
  使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
  能够改变元素的height，width的值.
  可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果

• display:inline;
  使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
  不能更改元素的height，width的值，大小由内容撑开.
  可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.

• display:inline-block;
  结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
  用通俗的话讲，就是不独占一行的块级元素。

• 其余可以参考display的32种写法

#sub{
   width:600px;
   position: absolute;
   border: 1px solid #f7f7f7;
   background: #f7f7f7;
   box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
   left: 200px;
   top: 0;
   box-sizing: border-box;
   margin: 0;
   padding: 10px;
}

.sub_content a{
   font-size: 12px;
   text-decoration: none;
}
.sub_content dd a{
   border-left: 1px solid #e0e0e0;
   padding: 0 10px;
   margin: 4px 0;
}

.sub_content dl{
   overflow: hidden;
}

关于overflow:hidden；一些重要特性见overflow，总的来说可以解决父级塌陷问题。本质上是触发了BFC特性（查阅资料时已经有同好总结的不错了，链接

.sub_content dt{
   float: left;
   width: 70px;
   font-weight: bold;
   clear: left;
   position: relative;
}

这里clear:left；使dt这个块级元素左边不需出现浮动元素，但要注意，float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响

.sub_content dd{
   float: left;
   margin-left: 5px;
   border-top: 1px solid #eee;
   margin-bottom: 5px;
}

.sub_content dt i{
   width: 4px;
   height: 14px;
   font: 400 9px/14px consolas;   /简写
   position:absolute;
   right:5px;
   top:5px;
}