#nav {
line-height: 22px; list-style-type: none; background:#d1d4fe;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#d1d4fe;
}
#nav li a:hover{
background:#0610b3;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#2f3bfc;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#MainPanel {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#Menu {
float: left;
width: 100%;
background-color: #d1d4fe;
}
<div id="MainPanel">
<div id="Menu">
<li><a href="#">考勤管理</a>
<ul>
<li><a href="#" onclick="#">我的考勤</a></li>
<li><a href="#" onclick="#">假期结算</a></li>
<li><a href="#" onclick="CIfm('IFramePage/CSVdaoru.html');">CSV導入</a></li>
<li><a href="#" onclick="CIfm('IFramePage/tongjichaxun.html');">统计查询</a></li>
</ul>
</li>
<li>
</li>
</div>
</div>