【前言】
本文简单说下如何用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技术来创建一个二级导航下拉列表，无需JavaScript，仅依赖HTML和CSS就能实现。这种方法既简单又高效，适用于初学者和有经验的开发者。 首先，我们需要构建HTML基础结构。一个基本的二...
纯CSS二级导航菜单是一种常见的网页设计技术，它利用CSS（层叠样式表）来实现页面上的多级导航结构，而不依赖JavaScript或者其他脚本语言。这种技术对于提高网站的加载速度和可访问性非常有利，因为它减少了对服务器...
纯CSS实现的下拉导航三级菜单，纯CSS实现的下拉导航三级菜单
【纯CSS垂直三级网站导航菜单】是一个用于网页设计的组件，它主要关注的是用户体验和页面的可导航性。这个菜单完全基于CSS3技术构建，不依赖JavaScript或其他编程语言，因此加载速度快，对浏览器的兼容性良好。以下...
在网页设计中，二级菜单是一种常见的交互元素，用于组织大量链接和内容，特别是在导航栏中。本实例将探讨如何利用CSS（Cascading Style Sheets）技术来创建动态的二级菜单，提升用户在网站上的浏览体验。 首先，...
在纯CSS的二级菜单中，我们通常需要利用伪类如`:hover`来实现鼠标悬停时显示二级菜单。例如： ```css .menu li { position: relative; /* 使li可以成为包含块 */ } .submenu { display: none; /* 隐藏默认状态 *...
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器...
本文将介绍一个名为“纯CSS3简单响应式二级导航菜单代码”的项目，该导航菜单在设计上充分展示了CSS3在现代网页设计中的应用，以及响应式设计在用户体验优化中的重要性。 CSS3，作为层叠样式表的最新版本，以其强大...
"迷人漂亮的纯CSS绿色二级网站菜单"是一个专为网站设计的交互式导航菜单，以其独特的绿色风格和优雅的视觉效果而引人注目。这个菜单完全基于CSS（层叠样式表）构建，遵循了WEB标准，确保了良好的浏览器兼容性和性能...
综上所述，"实用纯css+div二级图片导航菜单"的实现涉及到了CSS布局、HTML结构、伪类选择器、图片精灵、响应式设计、过渡效果以及访问性等多个方面。通过掌握这些知识点，开发者能够创建出既美观又功能完善的无脚本...
本教程将详述如何使用纯CSS技术实现一个横向的三级联动菜单导航栏。这个功能对于那些需要展示多级分类信息的网站尤其有用，例如电商网站的产品分类、知识库的层级结构等。 首先，我们需要创建HTML结构来表示导航栏...
通过CSS的`:hover`伪类，可以实现当鼠标悬停在一级菜单上时，二级菜单出现的效果： ```css .nav li { position: relative; /* 使子元素可以相对定位 */ } .subnav { display: none; /* 默认隐藏二级菜单 */ ...
本项目"css3酷炫导航条制作鼠标悬停下拉二级导航菜单"就是这样一个实例，它展示了如何利用CSS3的特性来实现动态的、具有下拉功能的二级导航菜单。 首先，我们要理解CSS3的核心特性在导航条设计中的应用。CSS3引入了...
【标题】中的“纯实现CSS3创意导航菜单特效”指的是使用CSS3的特性和功能来设计和构建一种创新且引人注目的网站导航菜单。这种菜单不仅提供了基本的导航功能，还利用CSS3的新特性增加了视觉吸引力和用户体验。 在...
总之，纯CSS实现的圆角二级下拉列表菜单是一种高效且灵活的设计方法，它能够提升网站的视觉效果和用户体验。通过熟练掌握CSS的各种属性和技巧，你可以创建出更复杂、更美观的网页界面。在实践中不断探索和优化，将使...
本主题聚焦于利用 `div` 元素和 `css` 样式来实现一个功能完备且易于定制的三级导航菜单。这种导航菜单常用于大型网站，帮助用户轻松浏览和访问深层页面内容。 首先，让我们了解一下 `div` 和 `css` 的基本概念。`...
不用js就可以通过简单修改实现自己好看的导航滑出效果，不占资源，效率高
**二级导航菜单** 是多级菜单结构，通常用于展示复杂的信息层级。在HTML5中，可以通过标签下的和元素创建，然后通过CSS3的:hover伪类和display属性来实现鼠标悬停时展开或收起二级菜单的效果。这种交互设计提高了...
在创建二级导航菜单时，我们可以使用`<nav>`元素来定义导航区域，然后使用`<ul>`和`<li>`元素来构建菜单的层次结构。例如： ```html <li><a href="#">一级菜单1 <li><a href="#">二级菜单1-1</a></li> <li>...
本文将详细介绍如何使用纯CSS（层叠样式表）构建二级和三级下拉导航，包括竖向和横向布局，并探讨相关技术要点。 首先，我们从基础开始，二级下拉导航通常由一个主菜单和与其相关的子菜单组成。在HTML结构中，我们...