纯CSS实现三级导航下拉菜单-css教程-PHP中文网

首页

web前端

css教程

纯CSS实现三级导航下拉菜单

阿神

Nov 08, 2016 pm 03:02 PM

<!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>     
    </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 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>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目，它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章：

使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API！碰巧的是，我得到了完美的

组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时，视觉组件与

将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时，它被称为Motion-Path，然后被更名。我

'恢复”在CSS中有什么作用？Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

热工具

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

SublimeText3汉化版

中文版，非常好用

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），