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.