html鼠标滑过导航条展开导航条,css鼠标悬停立体导航栏展示

* {

margin:0;

padding:0;

list-style:none;

}

body {

background-color:#999;

}

ul {

width:900px;

margin:100px auto;

height:80px;

position:relative;

}

ul::after,ul::before {

content:"";

position:absolute;

width:100px;

height:80px;

background-color:#ccc;

left:-100px;

}

ul::after {

/* left 设置auto，左边的left 属性 不在控制 left 值 */

left:auto;

right:-100px;

}

ul li {

float:left;

width:180px;

height:80px;

}

ul li span {

float:left;

height:80px;

}

ul li .left,ul li .right {

width:30px;

height:100%;

background-color:#ccc;

}

ul li .center {

width:120px;

height:80px;

background-color:#ccc;

text-align:center;

line-height:80px;

font-size:24px;

font-family:"Microsoft Yahei";

}

ul li:hover .left {

transform-origin:left;

transform:skew(0deg,-30deg);

background-color:#c1c1c1;

box-shadow:10px 20px 20px -10px #666;

}

ul li:hover .center {

transform:translateY(-17px);

text-shadow:5px 5px 3px #666;

box-shadow:0 20px 20px -10px #666;

}

ul li:hover .right {

transform-origin:right;

transform:skew(0deg,30deg);

background-color:#c1c1c1;

box-shadow:-10px 20px 20px -10px #666;

}