网站导航栏问题

我想要京东网左边的那种效果，自己做的不能在左边显示，是在下面，不会改：

<style>
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
#nav{
 width:150px;
 height:800px;
 position: absolute;
 border-bottom:0px;
 padding:0px 1px;
 z-index:150;
}
.list{
line-height:20px;
text-align:center;
padding:4px;
font-weight:normal;
}
.menu1{
width:140px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #FF0000;
background-color: #FFFFFF;
color: #3b75a5;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:140px;
height:30px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#3b75a5;
border:1px solid #cccccc;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:pointer;
}
</style>
<div align="left" id="top">
 <div id="nav" align="center">
  <ul>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">门禁系统 
    <div class="list">
     指纹门禁<br />
     刷卡门禁<br />
     拍照门禁<br />
     人脸识别<br />
     门禁配件<br />
    </div>
   </li>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">考勤机 
    <div class="list">
     刷卡考勤机<br />
     指纹考勤机<br />
     纸卡打卡机<br />
     照相考勤机<br />
     人脸考勤机<br />
     其他考勤机<br />
    </div>
   </li>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">点钞机
    <div class="list">
     普霖点钞机<br />
     科密点钞机<br />
     准星点钞机<br />
     康艺点钞机<br />
     融合点钞机<br />
     维融点钞机<br />
    </div>
   </li>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">支票机 
    <div class="list">
     普霖支票机<br />
     东波支票机<br />
     准星支票机<br />
     其他支票机<br />
    </div>
   </li>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">装订机
    <div class="list">
     财务装订机<br />
     维乐装订机<br />
     热熔装订机<br />
     胶圈装订机<br />
     铁圈装订机<br />
     其他装订机<br />
    </div>
   </li>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">售饭机 
    <div class="list">
     餐厅收费系统<br />
     会员收费系统<br />
     手持收费系统<br />
     个性收费系统<br />
    </div>
   </li>
   <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">碎纸机
    <div class="list">
     科密碎纸机<br />
     三木碎纸机<br />
     金典碎纸机<br />
     震旦碎纸机<br />
     德国EBA碎纸机<br />
     其他碎纸机<br />
    </div>
   </li>
   <li class="menu2">联系我们</li>
  </ul>
 </div>
</div>

 

http://www.zzjs.net/?p=2735.html

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息