css三级下拉的导航栏
#menu{
height: 65px;
width:100%;
background-color: rgba(0, 0, 0, 0.5);
}
#menu ul{
list-style: none;
}
#menu ul li{
float: left;
position: relative;/*如果这里不设置为relative的话,显示的下拉是水平的*/
}
#menu ul li a {/*最头部的导航链接的样式设置*/
text-align: center;
border-right:1px solid #e9e9e9;
padding:20px;
display:block;
text-decoration:none;
color:white;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
position: absolute;
}
#menu ul li:hover ul li a {/*第二列的导航链接的样式设置*/
display:block;
background:#12aeef;
color:#ffffff;
width: 50px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#menu ul li:hover ul li a:hover {
background:#6dc7ec;
color:#fff;
}
/*三级下拉框*/
#menu ul li:hover ul li ul{
display: none;
}
#menu ul li:hover ul li:hover ul{
display: block;
position: absolute;
top:0;/*这里使三级下拉框与二级下拉框对齐*/
left: 51px;/*这里是是三级下拉框的左边刚好在二级下拉框的右边一点*/
}
#menu ul li:hover ul li:hover ul li a{
display:block;
background:#12aeef;
color:#ffffff;
width: 50px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border-right: none;
}
#menu ul li:hover ul li:hover ul li a:hover{
background:#6dc7ec;
color:#fff;
}
最新文章
- SQL 归来
- ***Linux下使用git命令及github项目
- poj2389-Bull Math(大整数乘法)
- [poj1200]Crazy Search(hash)
- 集成代码编辑器ACE的经验
- MSI/MSI-X
- There is a legend about a bird
- Java ----------- 正则表达式(更新中。。。。。。)
- 通过OCI 处理 Oracle 10g 中处理Clob大字段写入
- YII2 实现后台操作记录日志
- ubuntu nginx安装及相关linux性能參数优化
- X-NUCA 2017 web专题赛训练题 阳光总在风雨后和default wp
- CSS 参考手册
- 【数据结构】赫夫曼树的实现和模拟压缩(C++)
- 【心得】Lattice后端使用经验小结(ECP5UM,DDR3,Diamond3.10,Reveal逻辑分析)
- Developing JSF applications with Spring Boot
- yum方面的知识
- NSObject
- php 编译安装 mysql.so
- 2.匿名类,匿名类对象,private/protected/public关键字、abstract抽象类,抽象方法、final关键字的使用,多线程Thread类start方法原理