【前言】
本文简单说下如何用CSS实现二级导航，CSS实现的缺点很明显：二级导航无法实现过渡效果，高度变化由0变auto的过程和display由none变block一样，无法实现过渡。
注意(局限性)：高度变化若想出现过渡效果，必须由0变到指定高度，如0-200px等才可以。
【主体
（1）height由0变为auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width: 80%;
height: 40px;
line-height: 40px;
margin: auto;
}
.nav>li{
float: left;
min-width: 150px;
position: relative;
padding-bottom: 10px;
}
.nav>li>a{
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
text-align: center;
color: white;
}
.nav>li>ul{
position: absolute;
top: 50px;
background: rgba(0,0,0,0.2);
min-width: 150%;
left: -25%;
height: 0px;
overflow: hidden;
transition: all 0.6s;
}
.nav>li>ul>li>a{
text-align: center;
display: block;
width: 100%;
height: 100%;
color: white;
}
.nav>li>a:hover{
background: rgba(0,0,0,0.4);
}
.nav>li:hover ul{
/*display: block;*/
height: auto;
}
.nav>li>ul>li>a:hover{
background: rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<!-- CSS实现的缺点很明显：二级导航无法实现过渡效果，高度变化由0变auto的过程和display由none变block一样，无法实现过渡。
注意：高度变化若想出现过渡效果，需要由0变到指定高度，如0-200px等才可以。 -->
<ul class="nav">
<li>
<a href="#">首页</a>
</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>
<li><a href="#">市场效益</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
（2）height由0变为200px----有过渡效果
将height的auto改为200px即可
（3）display由none改为block
.nav>li>ul{
display: none;
}
.nav>li:hover ul{
display: block;
}
.
相关推荐
以上就是使用纯CSS实现二级导航下拉菜单的基本步骤。通过调整CSS属性，你可以自定义菜单的样式、动画效果以及交互行为，以适应不同网站的设计需求。记住，良好的导航设计应简洁易用，同时保持与网站整体风格的一致性...
本教程将详细讲解如何使用纯CSS技术来创建一个二级导航下拉列表，无需JavaScript，仅依赖HTML和CSS就能实现。这种方法既简单又高效，适用于初学者和有经验的开发者。 首先，我们需要构建HTML基础结构。一个基本的二...
纯CSS精美二级导航栏，博客http://www.cnblogs.com/hxsyl/p/4489518.html
纯CSS实现的下拉导航三级菜单，纯CSS实现的下拉导航三级菜单
"纯CSS二级导航菜单"是一个完全依赖CSS（层叠样式表）来实现的交互式菜单，不涉及JavaScript或其他编程语言。这种菜单设计适用于那些希望简化代码、提高网页加载速度以及优化移动设备用户体验的开发者。 首先，我们...
这个名为“实用纯div+css圆形二级导航菜单.rar”的资源提供了一个使用这两种技术实现的圆形二级导航菜单实例。在这个压缩包中，包含了一些关键文件，如 `index.html`（主网页文件）、`sincol.net.txt`（可能是一个...
【纯CSS垂直三级网站导航菜单】是一个用于网页设计的组件，它主要关注的是用户体验和页面的可导航性。这个菜单完全基于CSS3技术构建，不依赖JavaScript或其他编程语言，因此加载速度快，对浏览器的兼容性良好。以下...
在网页设计中，二级菜单是一种常见的交互元素，用于组织大量链接和内容，特别是在导航栏中。本实例将探讨如何利用CSS（Cascading Style Sheets）技术来创建动态的二级菜单，提升用户在网站上的浏览体验。 首先，...
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器...
本文将介绍一个名为“纯CSS3简单响应式二级导航菜单代码”的项目，该导航菜单在设计上充分展示了CSS3在现代网页设计中的应用，以及响应式设计在用户体验优化中的重要性。 CSS3，作为层叠样式表的最新版本，以其强大...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
"迷人漂亮的纯CSS绿色二级网站菜单"是一个专为网站设计的交互式导航菜单，以其独特的绿色风格和优雅的视觉效果而引人注目。这个菜单完全基于CSS（层叠样式表）构建，遵循了WEB标准，确保了良好的浏览器兼容性和性能...
纯CSS实现横向导航栏，导航栏分三级子菜单，主要所用的html标签为ul与li
综上所述，"实用纯css+div二级图片导航菜单"的实现涉及到了CSS布局、HTML结构、伪类选择器、图片精灵、响应式设计、过渡效果以及访问性等多个方面。通过掌握这些知识点，开发者能够创建出既美观又功能完善的无脚本...
通过CSS的`:hover`伪类，可以实现当鼠标悬停在一级菜单上时，二级菜单出现的效果： ```css .nav li { position: relative; /* 使子元素可以相对定位 */ } .subnav { display: none; /* 默认隐藏二级菜单 */ ...
纯CSS下拉导航菜单是一种基于CSS（层叠样式表）技术实现的网页导航栏，它无需依赖JavaScript或者其他脚本语言，就能实现动态效果，如下拉菜单的展开和收起。这种技术对于优化网页性能、提高网站加载速度以及增强移动...
本项目"css3酷炫导航条制作鼠标悬停下拉二级导航菜单"就是这样一个实例，它展示了如何利用CSS3的特性来实现动态的、具有下拉功能的二级导航菜单。 首先，我们要理解CSS3的核心特性在导航条设计中的应用。CSS3引入了...
总之，纯CSS实现的圆角二级下拉列表菜单是一种高效且灵活的设计方法，它能够提升网站的视觉效果和用户体验。通过熟练掌握CSS的各种属性和技巧，你可以创建出更复杂、更美观的网页界面。在实践中不断探索和优化，将使...
CSS 浅蓝色二级导航菜单，带小三角提示，代码中使用了部分JS代码，当然图片也是离不了的，鼠标放上后第二级菜单显示出来，适合想学一些简单、基本的js操作的朋友们，本款菜单兼容性也很好，大部分网站都可适用，再此...
本主题聚焦于利用 `div` 元素和 `css` 样式来实现一个功能完备且易于定制的三级导航菜单。这种导航菜单常用于大型网站，帮助用户轻松浏览和访问深层页面内容。 首先，让我们了解一下 `div` 和 `css` 的基本概念。`...