首先我们需要了解什么是纯CSS实现的二级弹出菜单效果。
二级弹出菜单效果是指，当鼠标指向一级菜单时，二级菜单会在该一级菜单的下方水平展开。通常，这种效果需要JS的支持。但是有些开发者可能不想使用JS，只希望使用CSS来实现。那么这个要怎么做呢？
其实，实现纯CSS的二级弹出菜单效果，并不是一件困难的事情。可以使用CSS的:hover伪类和CSS选择器来实现这个效果。
接下来，我们就来详细说明一下如何实现。
1. HTML结构
首先，我们需要构建一个基本的HTML结构，包括一级和二级菜单的相关标签。
其中，一级菜单使用
- 和
- 标签来构建。二级菜单需要嵌套在一级菜单中，并使用
- 和
- 标签组成。代码如下：
<nav> <ul> <li><a href="#">菜单项1</a> <ul> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> </ul> </li> <li><a href="#">菜单项2</a> <ul> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> </ul> </li> <li><a href="#">菜单项3</a> <ul> <li><a href="#">子菜单项1</a></li> <li><a href="#">子菜单项2</a></li> <li><a href="#">子菜单项3</a></li> </ul> </li> </ul> </nav>2. CSS样式
接下来，我们需要为菜单添加CSS样式。主要是为了控制菜单的显示和隐藏。
首先，我们要隐藏所有子菜单，只有在一级菜单悬停时才显示相应的二级菜单。这里我们可以使用display:none来实现菜单的隐藏。而在一级菜单悬停时，我们使用子选择器(>)来选择它下面的子菜单。在样式中添加:hover伪类来实现鼠标悬停时显示二级菜单的效果。代码如下：
nav ul ul { display: none; } nav ul li:hover > ul { display: inherit; }其次，我们需要将菜单变成水平显示，并将子菜单的位置置于一级菜单的下方。这里，我们可以使用position属性来控制菜单的位置。代码如下：
nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { float: left; } nav ul li:hover { background: #4CAF50; } nav ul ul { position: absolute; } nav ul ul li { float: none; position: relative; } nav ul ul ul { position: absolute; top: 0; left: 100%; }3. 示例
示例一
以下是一个完整的HTML和CSS示例。它演示了如何使用纯CSS来实现一个简单的二级弹出菜单效果。
<!DOCTYPE html> <html> <head> <title>纯CSS二级弹出菜单示例</title> <style type="text/css"> nav ul { list-style: none; padding: 0; margin: 0; } nav ul li { float: left; position: relative; } nav ul li:hover { background: #4CAF50; } nav a { display: block; padding: 0 10px; color: #333; font-size: 15px; line-height: 50px; text-decoration: none; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; padding: 0; } nav ul ul li { float: none; position: relative; } nav ul ul li a { color: #666; line-height: 34px; padding: 10px; display: block; } nav ul ul li a:hover { background: #f2f2f2; } nav ul li:hover > ul { display: inherit; } </style> </head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> </ul> </nav> </body> </html>我们可以在浏览器中打开该示例，查看菜单的效果。
示例二
下面，我们再来分享一个使用SCSS预处理器和ul-li命名规则的示例，这个示例可以更加方便地维护和扩展菜单样式。
这个示例的思想是：
1.所有的菜单都在一个ul下，我们可以用ul-li命名规则，来统一样式；
2.二级菜单和一级菜单共用一个样式，所以可以将它们写在同一段样式中。
具体代码如下：
<!DOCTYPE html> <html> <head> <title>纯CSS二级弹出菜单示例</title> <!-- 引入SCSS样式 --> <style type="text/scss"> nav { ul { margin: 0; padding: 0; list-style: none; } li { float: left; position: relative; &:hover { a { background-color: #000; color: #fff; } ul { display: block; } } a { display: block; padding: 0.6em 0.8em; color: #000; text-decoration: none; &:hover { background-color: #f7f7f7; color: #000; } } ul { display: none; position: absolute; left: 0; top: 100%; min-width: 10em; padding: 0.5em 0; list-style: none; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); li { position: relative; padding: 0.4em 1.2em; } } } } </style> </head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">菜单1</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> <li><a href="#">子菜单4</a></li> </ul> </li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单3</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> </ul> </nav> <!--引入SCSS编译器--> <script src="https://scsstranspiler.com/scripts/compile.js"></script> <!-- 对SCSS代码进行编译 --> <script> var scssText = document.querySelector('style[type="text/scss"]').textContent; var cssText = SCSSTranspiler.compile(scssText); var style = document.createElement('style'); style.textContent = cssText; document.head.appendChild(style); </script> </body> </html>在浏览器中打开该示例，也可看到菜单的效果。
以上是关于纯CSS实现的二级弹出菜单效果的完整攻略，希望能对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯CSS(无JS)实现的二级弹出菜单效果代码 - Python技术站
- 标签组成。代码如下：
微信扫一扫 
支付宝扫一扫 