HTML/CSS 中的下拉菜单
[英]Dropdown in 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 个小时试图弄清楚如何制作它，以便下拉列表位于“数学”下而不是覆盖它。
1 个解决方案
解决方案1
1 已采纳 2021-04-04 18:06:17
您的.dropdown-content具有 position absolute ，将top css 规则添加到该选择器并将下拉内容元素向下推到主导航下方。
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>
HTMl CSS下拉导航
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.