【HTML】可展开的顶层菜单栏
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏下拉</title>
<link rel="stylesheet" href="导航栏下拉.css">
<style type="text/css">
.menuBar {
width: 400px;
border: 1px solid rgba(0, 0, 0, 0);
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.menuBar li {
padding: 8px;
position: relative;
background-color: rgba(255, 255, 255, 1);
}
.menuBar ul {
border: 1px solid rgba(0, 0, 0, 0.3);
display: none;
left: 0;
position: absolute;
top: 100%;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: rgba(255, 255, 255, 1);
}
.menuBar ul ul {
left: 100%;
position: absolute;
top: 0;
background-color: rgba(255, 255, 255, 1);
}
.menuBar li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.menuBar li:hover>ul {
display: block;
}
legend{
display:block;
width:100%;
padding:0;
margin-bottom:20px;
font-size:21px;
line-height:40px;
color:#333;
border:0;
border-bottom:1px solid #e5e5e5
}
</style>
</head>
<body>
<ul class="menuBar">
<li>
<div>文件</div>
<ul>
<li>
<div>新建数据库</div>
<ul>
<li>SQLite</li>
<li>达梦数据库</li>
<li>MySQL</li>
<li>Oracle</li>
<li>SqlServer</li>
</ul>
</li>
<li>
<div>新建连接</div>
<ul>
<li>SQLite</li>
<li>达梦数据库</li>
<li>MySQL</li>
<li>Oracle</li>
<li>SqlServer</li>
</ul>
</li>
<li>退出</li>
</ul>
</li>
<li>
<div>数据库管理</div>
<ul>
<li>武器库</li>
</ul>
</li>
<li>
<div>编辑</div>
<ul>
<li>修改表名</li>
<li>删除表</li>
<li>编辑表</li>
<li>取消编辑</li>
<li>添加行</li>
<li>删除行</li>
<li>添加列</li>
<li>删除列</li>
</ul>
</li>
<li>
<div>查看</div>
<ul>
<li>日志</li>
</ul>
</li>
<li>
<div>工具</div>
<ul>
<li>导入</li>
<li>导出</li>
<li><a href="chatRoom.html">聊天室</a></li>
</ul>
</li>
<li>
<div>帮助❓</div>
<ul>
<li>使用手册</li>
</ul>
</li>
</ul>
</html>