使用ul实现下拉列表

最新推荐文章于 2024-12-21 10:26:02 发布

_thyxyan

最新推荐文章于 2024-12-21 10:26:02 发布

阅读量1.1w

点赞数 1

分类专栏： HTML学习笔记文章标签：下拉列表 HTML ul

本文链接：https://blog.youkuaiyun.com/a1454285584/article/details/53888024

版权

HTML学习笔记专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何使用HTML的`<ul>`元素和CSS来创建一个交互式的下拉列表。通过设置`<li>`元素的样式和利用`:hover`伪类，实现了当鼠标悬停在一级菜单上时显示二级菜单的效果。这个方法提供了一种不依赖JavaScript实现下拉菜单的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用ul实现下拉列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用ul实现下拉列表</title>
<style>
*{margin:0px; padding:0px;}//清除默认
ul{
width:520px; //设置ul宽
height:30px; //设置ul高
list-style:none;//去除ul前面的点
}
ul li{
width:64px;
height:30px;
border:1px solid #000; //设置边框
float:left; //设置浮动
line-height:30px; //设置文本垂直居中
text-align:center;//设置文本水平居中

}
ul li ul{
width:65px;
height:95px;
background:#F00;
display:none;//将二级菜单初始隐藏
}
ul li:hover ul{
display:block;//使用hover，当鼠标移动到对应的一级菜单上是显示二级菜单
}
</style>
</head>
<body>
<ul>
<li>浮动1
<ul>
<li>二级1</li>
<li>二级2</li>
<li>二级3</li>
</ul>
</li>
<li>浮动2
<ul>
<li>二级1</li>
<li>二级2</li>
<li>二级3</li>
</ul>
</li>
<li>浮动3</li>
<li>浮动4</li>
<li>浮动5</li>
</ul>
</body>
</html>