简体   繁体   中英

Dropdown in HTML/CSS

I'm trying to make to make my first website with html and css (and js later). I want to make a calculator with a dropdown menu, but I'm struggling to make the dropdown menu as when it is hovered over, the dropdown list covers the menu.

 .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>

I spent at least 3 hours trying to figure out how to make it so that the dropdown list is under "Maths" instead of covering it.

Your .dropdown-content has position absolute , add the top css rule to that selector and push the dropdown-content element down below the main nav.

position: absolute ~ The element is positioned relative to its first positioned (not static) ancestor element . This will allow you to set top , left , right and bottom .

 .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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM