CSS常用菜单(三)
来源:互联网 发布:阿里云io优化 编辑:程序博客网 时间:2024/06/15 12:12
3、多级菜单
下面我们来实现如下图所示的多级菜单
html代码:
css代码:
<style type="text/css">
body
{
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
behavior: url(../Scripts/csshover.htc);
}
h1
{
font: bold 16px;
}
p
{
font: 11px;
}
a
{
color: #900;
text-decoration: none;
}
a:hover
{
background: #900;
color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu
{
margin: 0;
border: 0 none;
padding: 0;
width: 500px; /*For KHTML*/
list-style: none;
height: 24px;
}
ul#navmenu li
{
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul
{
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul li
{
float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a
{
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a
{
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a, ul#navmenu li.iehover li a
{
float: none;
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a
{
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a
{
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a
{
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a
{
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover
{
background: #CCC;
color: #FFF;
}
ul#navmenu ul ul, ul#navmenu ul ul ul
{
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul
{
display: none;
}
ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul
{
display: block;
}
</style>
- CSS常用菜单(三)
- CSS常用菜单(四)
- 纯CSS菜单导航(三)竖向
- CSS实现常用菜单(一)
- CSS实现常用菜单(二)
- 常用的css弹出菜单
- CSS导航菜单--三状态玻璃效果菜单(双层滑动门应用)
- 5款DIV+CSS导航菜单(三)
- 5款DIV+CSS导航菜单(三)
- html css层叠样式基础(常用选择器)(三)
- js改变css的三种方式(后两种较常用)
- JavaScript+CSS下拉菜单系列(三)——伸缩不限,高度不固定的带缓动的下拉菜单
- web前端之CSS设计指南三:界面组件(菜单)
- Java Web开发实例(三) 3.新建菜单和引用CSS文件
- 变换菜单制作(css)
- CSS常用的三种选择符
- HTML常用标记、CSS三种选择器
- 利用css绘制三条横线的菜单图标
- JVM的内存存储详解
- atoi 函数的实现
- [BZOJ1088][SCOI2005]扫雷Mine(dp)
- shell提取文件名称和类型
- GLSE 语句和结构体
- CSS常用菜单(三)
- lua学习笔记.md
- linux下用GPRS模块发送POST请求
- 2.7 并发
- XLUA的热更新example运行的笔记
- 网易游戏数据挖掘实习生笔试经历
- GLSL 其他说明
- 证书格式
- C++实现委托机制(三)——lambda表达式封装