【前言】
本文简单说下如何用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二级导航菜单是一种常见的网页设计技术，它利用CSS（层叠样式表）来实现页面上的多级导航结构，而不依赖JavaScript或者其他脚本语言。这种技术对于提高网站的加载速度和可访问性非常有利，因为它减少了对服务器...
纯CSS精美二级导航栏，博客http://www.cnblogs.com/hxsyl/p/4489518.html
纯css实现的漂亮的左右二级导航效果，支持所有浏览器，无需任何javascript
纯CSS实现的下拉导航三级菜单，纯CSS实现的下拉导航三级菜单
【纯CSS垂直三级网站导航菜单】是一个用于网页设计的组件，它主要关注的是用户体验和页面的可导航性。这个菜单完全基于CSS3技术构建，不依赖JavaScript或其他编程语言，因此加载速度快，对浏览器的兼容性良好。以下...
在网页设计中，二级菜单是一种常见的交互元素，用于组织大量链接和内容，特别是在导航栏中。本实例将探讨如何利用CSS（Cascading Style Sheets）技术来创建动态的二级菜单，提升用户在网站上的浏览体验。 首先，...
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
"迷人漂亮的纯CSS绿色二级网站菜单"是一个专为网站设计的交互式导航菜单，以其独特的绿色风格和优雅的视觉效果而引人注目。这个菜单完全基于CSS（层叠样式表）构建，遵循了WEB标准，确保了良好的浏览器兼容性和性能...
综上所述，"实用纯css+div二级图片导航菜单"的实现涉及到了CSS布局、HTML结构、伪类选择器、图片精灵、响应式设计、过渡效果以及访问性等多个方面。通过掌握这些知识点，开发者能够创建出既美观又功能完善的无脚本...
本教程将详述如何使用纯CSS技术实现一个横向的三级联动菜单导航栏。这个功能对于那些需要展示多级分类信息的网站尤其有用，例如电商网站的产品分类、知识库的层级结构等。 首先，我们需要创建HTML结构来表示导航栏...
纯CSS下拉导航菜单是一种基于CSS（层叠样式表）技术实现的网页导航栏，它无需依赖JavaScript或者其他脚本语言，就能实现动态效果，如下拉菜单的展开和收起。这种技术对于优化网页性能、提高网站加载速度以及增强移动...
本项目"css3酷炫导航条制作鼠标悬停下拉二级导航菜单"就是这样一个实例，它展示了如何利用CSS3的特性来实现动态的、具有下拉功能的二级导航菜单。 首先，我们要理解CSS3的核心特性在导航条设计中的应用。CSS3引入了...
【标题】中的“纯实现CSS3创意导航菜单特效”指的是使用CSS3的特性和功能来设计和构建一种创新且引人注目的网站导航菜单。这种菜单不仅提供了基本的导航功能，还利用CSS3的新特性增加了视觉吸引力和用户体验。 在...
纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯...
总结，利用CSS3，我们可以轻松地创建一个具有红色风格和交互性的水平二级导航菜单。通过合理布局HTML结构和应用CSS3特性，如伪类、过渡效果和绝对定位，可以实现美观且功能完备的网页导航菜单。这个案例展示了CSS3在...
总之，纯CSS实现的圆角二级下拉列表菜单是一种高效且灵活的设计方法，它能够提升网站的视觉效果和用户体验。通过熟练掌握CSS的各种属性和技巧，你可以创建出更复杂、更美观的网页界面。在实践中不断探索和优化，将使...
本主题聚焦于利用 `div` 元素和 `css` 样式来实现一个功能完备且易于定制的三级导航菜单。这种导航菜单常用于大型网站，帮助用户轻松浏览和访问深层页面内容。 首先，让我们了解一下 `div` 和 `css` 的基本概念。`...