程序博客网 > 见见软件

CSS实现三级导航下拉菜单

来源：互联网 发布：见见软件 编辑：程序博客网 时间：2024/06/06 21:43
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type = "text/css">
/*设置通配符样式*/
*{
    margin:0; 
    padding:0;
}
body{
    font-size:12px;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
}
 
/*设置二级导航样式*/   
.nav {
    width:500px; 
    height:30px;
    background-color:#b4b4b4;
    /*导航栏居中*/
    margin:auto;
}
.nav ul li { 
    width:100px; 
    height:30px; 
    float:left; 
    position:relative;
}
.nav ul li a {
    display:block;
    width:96px; 
    border:2px solid gray; 
    height:26px; 
    line-height:26px; 
    text-align:center;
}
.nav ul li a:hover { 
    background-color:yellow;
}
 
/*设置一级导航样式*/
.nav ul li ul{
    display:none;
}
.nav ul li:hover ul{
    display:block;
    width:100px;
    position:absolute;
    top:30px;
    left:0;
    background-color:white;
}
.nav ul li:hover ul li a{
    display:block;
    width:96px;
    height:26px;
    line-height:26px;
    border:2px solid gray;
    text-align:center;
}
.nav ul li:hover ul li a:hover{
    background-color:orange;
}
 
/*设置三级导航样式*/
.nav ul li:hover ul li ul { 
    display:none;
}
.nav ul li:hover ul li:hover ul{ 
    display:block; 
    width:100px; 
    position:absolute; 
    top:0px; 
    left:100px;
    background-color:#b4b4b4;
}
.nav ul li:hover ul li:hover ul li { 
    width:100px; 
    height:30px; 
}
.nav ul li:hover ul li:hover ul li a { 
    display:block; 
    width:96px; 
    height:26px; 
    line-height:26px; 
    border:2px solid gray; 
    text-align:center; 
}
.nav ul li:hover ul li:hover ul li a:hover { 
    background-color:#00CC00;
}
.nav ul li:hover ul .nav_jw ul { 
    display:none;
}
.nav ul li:hover ul .nav_jw:hover ul{ 
    display:block; 
    width:100px; 
    position:absolute; 
    top:0px; 
    left:-100px;
    background-color:#b4b4b4;
}
.nav ul li:hover ul .nav_jw:hover ul li { 
    width:100px; 
    height:30px; 
}
.nav ul li:hover ul .nav_jw:hover ul li a { 
    display:block; 
    width:96px; 
    height:26px; 
    line-height:26px; 
    border:2px solid gray; 
    text-align:center; 
}
.nav ul li:hover ul .nav_jw:hover ul li a:hover { 
    background-color:#00CC00;
}
 
</style>
</head>
<body>
<div class = "nav">
<ul>
<li><a href = "#">用户中心</a>
    <ul>
    <li><a href = "#">用户管理</a>
        <ul>
            <li><a href = "#">修改个人信息</a></li>
            <li><a href = "#">忘记密码</a></li>
            <li><a href = "#">绑定信息</a></li>
        </ul>
    </li>     
    <li><a href = "#">删除的用户</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
    <li><a href = "#">黑名单</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>  
<li><a href = "#">浏览记录</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>  
<li><a href = "#">下载记录</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li> 
<li><a href = "#">分享记录</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li> 
    </ul>
</li>


<li><a href = "#">评论管理</a>
    <ul>
    <li class="nav_jw"><a href = "#">评论列表</a>
   <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
    <li class="nav_jw"><a href = "#">意见反馈</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
         
    </ul>
</li>
<li><a href = "#">页面管理</a>
    <ul>
    <li class="nav_jw"><a href = "#">首页管理</a>
   <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
    <li class="nav_jw"><a href = "#">友情链接</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
         
    </ul>
</li>
<li><a href = "#">管理员管理</a>
    <ul>
    <li class="nav_jw"><a href = "#">角色管理</a>
   <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
    <li class="nav_jw"><a href = "#">权限管理</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
     <li class="nav_jw"><a href = "#">管理员列表</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>    
    </ul>
</li>
<li><a href = "#">系统管理</a>
    <ul>
    <li class="nav_jw"><a href = "#">基本设置</a>
   <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
    <li class="nav_jw"><a href = "#">栏目设置</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li>     
     <li class="nav_jw"><a href = "#">数据字典</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li> 
<li class="nav_jw"><a href = "#">屏蔽词</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li> 
<li class="nav_jw"><a href = "#">系统日志</a>
        <ul>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
            <li><a href = "#">三级导航</a></li>
        </ul>
    </li> 
    </ul>
</li>
</ul>
</div>
</body>
</html>
0 0
见见软件 见见软件
原创粉丝点击
热门IT博客
df linuxdf linux
深圳软件开发公司深圳软件开发公司
什么软件装双系统
excel2010宏编程教程
命令与征服将军2知乎
上帝保佑美国 知乎
淘宝优惠券网
淘宝昵称大全
金山软件股东
斐讯qq营销软件
冒泡算法 java
linux shell 等待输入
java前端和后端的意思
linux 解压缩war
2017年零售业数据分析
淘宝设计素材 百度云盘
java web start 下载
八字胸肌 知乎
三菱plcq系列伺服编程
软件系统总体结构图
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 东方财富博客网 东方财富电脑版首页 东方手机财富 下载东方财富软件 东方财富股票网 东方财经财富网 东方财富股票行情 东方财富股吧 东方财富博客 300059股吧 财富网 dongfang 88财富 东财富网首页 東方財富網 东财网 财经网 财富 東方 采富网 东施效颦 娇妾东施娘 东施娘作品 娇妾东施 贵妾东施娘 东施娘 东施 贵妾 东施娘 娇妾 东施娘 媚宦 东施娘 东施效颦的意思 东施效颦的故事 东施效颦故事 东施效颦什么意思 东施效颦道理 东施效颦出自 东施效颦近义词 东施效颦是什么意思 范蠡与东施的爱情故事 东施效颦的意思和故事 东施不效颦 miss苏

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里