CSS 实现鼠标悬停上弹出二级菜单（一）

桃扇骨 2023-10-05 09:47 29阅读 0赞

#### 效果: ####

![20200908174323611.png][]

#### HTML页面 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			ul {
    				list-style: none;
    				display: flex;
    				flex-wrap: wrap;
    				/* 相对定位-父 */
    				position: relative;
    			}
    
    			.one li {
    				margin: 10px;
    			
    			}
    
    			/* 隐藏 */
    			.one ul {
    				/* 绝对定位-子 */
    				position: absolute;
    				background: #CCCCCC;
    				display: none;
    			}
    
    			/* 显示 */
    			.one li:hover ul {
    				display: block;
    			}
    		</style>
    	</head>
    	<body>
    		<ul class="one">
    			<li><a href="#">aaa</a>
    				<ul>
    					<li>111</li>
    					<li>222</li>
    					<li>333</li>
    				</ul>
    			</li>
    			<li><a href="#">bbb</a>
    				<ul>
    					<li>111</li>
    					<li>222</li>
    					<li>333</li>
    				</ul>
    			</li>
    			<li><a href="#">ccc</a>
    				<ul>
    					<li>111</li>
    					<li>222</li>
    					<li>333</li>
    				</ul>
    			</li>
    		</ul>
    	</body>
    </html>

[20200908174323611.png]: https://img-blog.csdnimg.cn/20200908174323611.png

发表评论取消回复

表情：

评论列表（有 0 条评论，29人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 实现鼠标悬停放大

.qr-code:hover { transform: scale(1.5); // 放大1.5倍 transition: a

迷南。/ 2023年10月06日 09:19/ 0 赞/ 48 阅读

相关 CSS 实现鼠标悬停上弹出二级菜单动画显示（二）

效果： ![20200908175021900.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

系统管理员/ 2023年10月05日 09:47/ 0 赞/ 25 阅读

相关 CSS 实现鼠标悬停上弹出二级菜单（一）

效果: ![20200908174323611.png][] HTML页面 <!DOCTYPE html> <html> <head>

桃扇骨/ 2023年10月05日 09:47/ 0 赞/ 30 阅读

相关 css实现鼠标悬停改变图片

样式： <style> .bshApp img:hover{ content:url('bshsjjscpdf/bsh_four_

桃扇骨/ 2023年10月03日 19:59/ 0 赞/ 77 阅读

相关 QT鼠标右键弹出菜单

在用QT编程时，有时候要实现鼠标右键弹出菜单的功能．下面代码演示鼠标右键弹出菜单． 1.新建一个QT工程，点击MainWindow.ui，鼠标右键Go to slot....

小鱼儿/ 2023年06月06日 04:00/ 0 赞/ 56 阅读

相关纵向、横向导航菜单及二级弹出菜单

一、纵向导航菜单及二级弹出菜单首先在body中添加一个div标签，其中包含ulli ul的标签结构存放网站菜单，效果如下： <%@ page language="

叁歲伎倆/ 2022年05月26日 09:42/ 0 赞/ 553 阅读

相关 CSS鼠标悬停

> 在学习中遇到许多好看的样式，虽然只是用HTML+CSS简单的实现，仅作为我的学习笔记和同爱好学习者的分享：先看效果 ![这里写图片描述][70] HTM

港控/mmm°/ 2022年05月25日 06:17/ 0 赞/ 367 阅读

相关 css横排菜单实现鼠标悬停更改样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年05月17日 21:17/ 0 赞/ 248 阅读

相关 css实现鼠标悬停效果

![在这里插入图片描述][20200527151344896.gif] 感觉css的话，原来的我认为很难学，挺生涩的，但是认真看了以后，感觉css很有意思，能写出很多好看的

浅浅的花香味﹌/ 2021年07月27日 01:57/ 0 赞/ 616 阅读

相关 CSS之二级弹出菜单设计

1、css里面两种隐藏方式：（1） display: none;不占用物理空间 (2)visibility:hidden;占用物理空间 2、选择器： 1、后代选择器：...

小灰灰/ 2021年05月03日 04:22/ 0 赞/ 726 阅读