div+css 实现菜单栏，2层结构
来源：互联网 发布：古代欧洲城堡结构 知乎 编辑：程序博客网 时间：2024/06/06 15:04
<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层结构
- Div+CSS布局入门教程--写入整体层结构与CSS
- Div+CSS布局入门教程--写入整体层结构与CSS
- Div+CSS布局之写入整体层结构与CSS
- (div+css特效代码) 导航菜单栏
- DIV+CSS实现显示隐藏层
- CSS实现DIV层背景颜色渐变
- Div+Css实现图层固定，吊窗
- CSS实现半透明div层的方法
- CSS实现半透明div层的方法
- css实现div层透明毛玻璃
- CSS+DIV+JS树形2层菜单
- div + css 拖动层
- 如何用CSS+DIV制作二级菜单栏
- 灰色div+css导航菜单栏代码
- 纯css实现二级菜单栏
- 纯css实现三级菜单栏
- 纯css实现三级菜单栏
- fckeditor 添加blur事件 判断是否填写内容 firefox、ie
- C#导出Excel，某单元格内容长度超过255 的解决方法
- A skeleton of a C# program
- Android 小知识
- C语言inline详细讲解
- div+css 实现菜单栏，2层结构
- SIM300用UDP发送数据调试小结
- 在Android平台上，集成了一个嵌入式关系型数据库—SQLite
- Linux细节 - Linux 日志轮替
- 百度地图API之添加标签及链接
- sql server 删除某个字段重复的记录并留下一条记录
- PHP重点复习 5
- NTP网络校时协议
- MySQL中的锁机制
