html+css实现水平手风琴菜单

最新推荐文章于 2024-09-22 20:36:19 发布

T型人小付

最新推荐文章于 2024-09-22 20:36:19 发布

阅读量1k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Victor2code/article/details/104760345

版权

这是千锋教育的一个练习题，老师用float的方法做出来的，这里换一种思路，不用float试试能不能弄出来。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。

文章目录

- 最终效果
- 思路
- html
- css

最终效果

最终效果如下所示，鼠标悬停在某个导航菜单的时候在其右边弹出其下的子菜单，鼠标移开子菜单消失。
在这里插入图片描述

思路

和垂直手风琴菜单的思路差不多，都是利用display:none;隐藏元素的特性来实现子菜单的出现和消失。
不过这里还需要考虑将块级元素变为行内块级元素的操作。

html

和垂直的手风琴菜单使用的html一模一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<ul id="menu">
			<li><span>menu1</span>
			<u

最低0.47元/天解锁文章