javascript - HTML/CSS 中的下拉菜单
问题描述
我正在尝试使用 html 和 css(以及后来的 js)制作我的第一个网站。我想制作一个带有下拉菜单的计算器,但我正在努力制作下拉菜单,因为当它悬停时,下拉列表会覆盖菜单。
.redirect:hover {
background-color: #aac8ff;
}
div {
background-color: #ccd9fb;
}
h1 {
font-size: 20px;
}
.dropdown-content a {
background-color: #aac8ff
}
.container:hover .dropdown-content {
display: block
}
.dropdown-content a:hover {
background-color: #99b7ff;
}
li.container {
display: inline
}
li {
display: inline;
}
body {
background-color: #eefbfb;
}
.top h1,
.top ul {
display: inline-block;
vertical-align: top;
}
.redirect {
text-decoration: none;
font-size: 20px;
display: block;
float: right;
color: #fff;
width: 125px;
text-align: center;
border-left: 1px solid #eefbfb;
padding: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #99b7ff;
}
.dropdown-content a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
<div class="top">
<h1>123Calculator</h1>
</span>
<ul>
<li><a class="redirect" href="equations.html">Equations</a></li>
<li><a class="redirect" href="physics.html">Physics</a></li>
<li class="container">
<a class="redirect" href="maths.html">Maths</a>
<div class="dropdown-content">
<a href="/Maths/1.AlgExpr.html">Algebraic Expressions</a>
<a href="/Maths/2.EqNIn.html">Equations and Inequalities</a>
<a href="/Maths/3.SkeCur.html">Sketching Curves</a>
<a href="Maths/4.ymaxc.html">Equations of Straight Lines</a>
<a href="Maths/5.circles.html">Circles</a>
<a href="Maths/6.trig.html">Trigonometry</a>
<a href="Maths/7.ExpNLog.html">Exponentials and Logarithms</a>
<a href="Maths/8.Diff.html">Differentiation</a>
<a href="Maths/9.Integ.html">Integration</a>
<a href="Maths/10.vect.html">Vectors</a>
<a href="Maths/11.proof.html">Proof</a>
<a href="Maths/12.kinem.html">Kinematics</a>
<a href="Maths/13.forces.html">Forces</a>
</div>
</li>
</ul>
</div>
我花了至少 3 个小时试图弄清楚如何制作它,以便下拉列表位于“数学”下而不是覆盖它。
解决方案
您.dropdown-content
拥有绝对位置,将css 规则添加到该选择器并将下拉内容元素向下top
推到主导航下方。
position: absolute
~元素相对于其第一个定位(非静态)的祖先元素进行定位。这将允许您设置顶部、左侧、右侧和底部。
.redirect:hover {
background-color: #aac8ff;
}
div {
background-color: #ccd9fb;
}
h1 {
font-size: 20px;
}
.dropdown-content a {
background-color: #aac8ff
}
.container:hover .dropdown-content {
display: block
}
.dropdown-content a:hover {
background-color: #99b7ff;
}
li.container {
display: inline
}
li {
display: inline;
}
body {
background-color: #eefbfb;
}
.top h1,
.top ul {
display: inline-block;
vertical-align: top;
}
.redirect {
text-decoration: none;
font-size: 20px;
display: block;
float: right;
color: #fff;
width: 125px;
text-align: center;
border-left: 1px solid #eefbfb;
padding: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
top: 58px;
z-index: 1;
min-width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #99b7ff;
}
.dropdown-content a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
<body>
<div class="top">
<h1>123Calculator</h1>
</span>
<ul>
<li><a class="redirect" href="equations.html">Equations</a></li>
<li><a class="redirect" href="physics.html">Physics</a></li>
<li class="container">
<a class="redirect" href="maths.html">Maths</a>
<div class="dropdown-content">
<a href="/Maths/1.AlgExpr.html">Algebraic Expressions</a>
<a href="/Maths/2.EqNIn.html">Equations and Inequalities</a>
<a href="/Maths/3.SkeCur.html">Sketching Curves</a>
<a href="Maths/4.ymaxc.html">Equations of Straight Lines</a>
<a href="Maths/5.circles.html">Circles</a>
<a href="Maths/6.trig.html">Trigonometry</a>
<a href="Maths/7.ExpNLog.html">Exponentials and Logarithms</a>
<a href="Maths/8.Diff.html">Differentiation</a>
<a href="Maths/9.Integ.html">Integration</a>
<a href="Maths/10.vect.html">Vectors</a>
<a href="Maths/11.proof.html">Proof</a>
<a href="Maths/12.kinem.html">Kinematics</a>
<a href="Maths/13.forces.html">Forces</a>
</div>
</li>
</ul>
</div>
</body>
推荐阅读
- laravel - Laravel RouteNotFoundException
- javascript - YII2:模态窗口:未捕获的 ReferenceError:未定义 bootstrapSwitch_9a42af04
- python - 我怎样才能得到chatmessage_thread(我正在使用Django Rest Framework)
- cmd - 如何在 Windows 10 上更改 Anaconda Prompt (cmd) 的提示颜色?
- c# - 如何迭代地将对象添加到数组中
- c - mingw make 在运行可执行文件时给出错误代码-107374181
- c - 有没有办法在 C 中浏览一个文件,并且只有在满足某个字符串时才打印以下行?(初学者)
- python - Python kivymd TypeError: __init__() 接受 1 个位置参数,但给出了 2 个
- lua - 代码说“尝试比较数字 <= 实例”
- tsql - 在 SQL Server 中,是否可以在不聚合的情况下对行进行透视?