代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏下拉</title>
<style type="text/css">
header{
width: 1220px;
height: 65px;
margin: 0px auto;
border: #000000 1px solid;
}
footer{
width: 1220px;
height: 65px;
margin: 0px auto;
border: #000000 1px solid;
}
ul,ol{
list-style-type: none;
}
.p1{
width: 1220px;
height: 600px;
}
.p1 #main1{
width: 13%;
height: 590px;
margin: 5px auto;
border: red solid 1px;
position: absolute;
left: 149px;
}
.p1:after{
content: "";
display: block;
clear: both;
}
a{
text-decoration: none;
color: #000000;
}
#main #main1{
font-weight: bold;
color: #FFFFFF;
background: #DDDDDD;
line-height: 60px;
}
#main #main1 .p2{
display: none;
width: 400px;
height: 360px;
border: #0000FF 1px solid;
background: royalblue;
color: white;
font-size: 16px;
line-height: 30px;
}
#main{
position: relative;
}
#main #main1 li:hover .p2{
display: block;
right: -404px;
top: 0;
position: absolute;
}
</style>
</head>
<body>
<header>
</header>
<section>
<div id="main" class="p1">
<div id="main1">
<ul>
<li><a href="#">导航1</a>
<div class="p2">
<dl>
<dt>导航1
<dd>lol</dd>
<dd>qq飞车</dd>
<dd>cf</dd>
</dt>
</dl>
</div>
</li>
<li><a href="#">导航2</a>
<div class="p2">
<dl>
<dt>导航2
<dd>淘宝</dd>
<dd>天猫</dd>
<dd>京东</dd>
</dt>
</dl>
</div>
</li>
<li><a href="#">导航3</a>
<div class="p2">
<dl>
<dt>导航3
<dd>食物</dd>
<dd>衣服</dd>
<dd>家具</dd>
</dt>
</dl>
</div>
</li>
<li><a href="#">导航4</a>
<div class="p2">
<dl>
<dt>导航4
<dd>电脑</dd>
<dd>鼠标</dd>
<dd>键盘</dd>
</dt>
</dl>
</div>
</li>
<li><a href="#">导航5</a>
<div class="p2">
<dl>
<dt>导航5
<dd>金属</dd>
<dd>塑料</dd>
<dd>合金</dd>
</dt>
</dl>
</div>
</li>
</ul>
</div>
<div id="main2">
</div>
<div id="main3">
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>