左侧导航栏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul,body{
margin: 0;
padding-left: 0;
}
ul{
position: relative;
width:250px;
padding: 0;
margin:50px;
list-style: none;
}
ul li{
height: 40px;
line-height: 40px;
font-size: 14px;
font-size: #ccc;
text-indent:1em;
background-color:#988989;
color:#F3E8E8;
}
ul li div{
position: absolute;
top:0;
width:600px;
height:200px;
left:250px;
background-color:#B95C5D;
display: none;
}
ul li:hover{
background-color:#B95C5D;
}
ul li:hover div{
display:block;
}
</style>
</head>
<body>
<ul>
<li>1<div></div></li>
<li>2<div></div></li>
<li>3<div></div></li>
<li>4<div></div></li>
<li>5<div></div></li>
</ul>
</body>
</html>
