<style type="text/css">/* 设置菜单栏宽度,高度,字体格式 */ .menu { font-family: arial, sans-serif; width:900px; height:50px; } /* 去除列表前的样式 */ .menu ul { padding:0; margin:0; list-style-type:none; } /* 将第一层列转行 */ .menu ul li { float:left; position:relative; } /* 设置没个菜单项目的样式(包括子项) */ .menu ul li a,.menu ul li a:visited { display:block; text-align:center; text-decoration:none; width :120px; height:30px; background:transparent; line-height:30px; border:1px solid transparent; border-width:1px 1px 0 0; font-size:13px; color:black; } /* 隐藏菜单子项 */ .menu ul li ul { display:none; } /* 鼠标移动在该项上显示菜单子项 */ .menu ul li:hover ul { display:block; position:absolute ; top:31px; left:0; width:125px; } /* 设置具体菜单栏子项的样式 */ .menu ul li:hover ul li a { font-size:10px; height:25px; line-height:25px; background:#F0F0F0; } /* 更改鼠标移动到菜单子项时的颜色 */ .menu ul li:hover ul li a:hover { background:#365F91; } </style>
<!--HTML菜单列表--> <div align="center"> <div class="menu"> <ul> <li><a href="#">1111</a> <ul> <li><a href="#">11_11</a></li> <li><a href="#">11_22</a></li> <li><a href="#">11_33</a></li> <li><a href="#">11_44</a></li> <li><a href="#">11_55</a></li> </ul> </li> <li><a href="#">2222</a> <ul> <li><a href="#">22_11</a></li> <li><a href="#">22_22</a></li> <li><a href="#">22_33</a></li> <li><a href="#">22_44</a></li> <li><a href="#">22_55</a></li> </ul> </li> <li><a href="#">3333</a> <ul> <li><a href="#">33_11</a></li> <li><a href="#">33_22</a></li> <li><a href="#">33_33</a></li> <li><a href="#">33_44</a></li> <li><a href="#">33_55</a></li> </ul> </li> <li><a href="#">4444</a> <ul> <li><a href="#">44_11</a></li> <li><a href="#">44_22</a></li> <li><a href="#">44_33</a></li> <li><a href="#">44_44</a></li> <li><a href="#">44_55</a></li> </ul> </li> <li><a href="#">5555</a> <ul> <li><a href="#">55_11</a></li> <li><a href="#">55_22</a></li> <li><a href="#">55_33</a></li> <li><a href="#">55_44</a></li> <li><a href="#">55_55</a></li> </ul> </li> </ul> <div></div> </div> </div>
将上述文件放在Menu.htm最后在aspx页面上引用菜单栏文件即可
<!--#include file="Menu_Test.htm"-->
div+css 实现菜单栏,2层结构
最新推荐文章于 2018-06-21 18:15:29 发布