HTML/CSS dropdown menu hiding other dropdown menu
Question
this is my website that I am developing, and I trying to develop a calculator which depending on the subject and equation your are trying to use, the calculator will give you an answer.
I made two dropdown menus, however, when I hover over the "Physics" menu, for some reason the "Maths" menu is covered. Also, the list for "Physics" is a bit too long and I wanted to make a scroll bar, but I don't know how to.
I tried to look on w3schools and other resources, but I couldn't find a solutions which solved my problem.
.redirect:hover{background-color:#aac8ff;} div{background-color:#ccd9fb;} h1{font-size: 20px; padding-left:10px;}.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; font-family: 'Inconsolata', monospace; }.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; float:right; }.dropdown-content{ display:none; z-index:1; min-width:auto; max-width:155px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background-color:#99b7ff; }.dropdown-content a{ color:#fff; display:block; padding: 10px 13px; 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 class="container"> <a class="redirect" href="physics.html">Physics</a> <div class="dropdown-content"> <a href="Physics/1.PhotNEnLvl.html">Phontons and Energy levels</a> <a href="Physics/2.Waves.html">Waves</a> <a href="Physics/3.Mech.html">Mechanics</a> <a href="Physics/4.Mat.html">Materials</a> <a href="Physics/5.Elect.html">Electricity</a> <a href="Physics/6.CircMot.html">Circular Motion</a> <a href="Physics/7.SimpHarMot.html">Simple Harmonic Motion</a> <a href="Physics/8.TherPhy.html">Thermal Physics</a> <a href="Physics/9.GravFie.html">Gravitational Fields</a> <a href="Physics/10.ElecFieNCap.html">Electric Fields and Capacitors</a> <a href="Physics/11.MagFie.html">Magnetic Fields</a> <a href="Physics/12.NukePhy.html">Nuclear Physics</a> <a href="Physics/13.Astro.html">Astrophysics</a> <a href="Physics/14.MedPhy.html">Medical Physics</a> <a href="Physics/15.EngPhy.html">Engineering Physics</a> <a href="Physics/16.TurnPInPhys.html">Turning Points in Physics</a> <a href="Physics/17.Electronics.html">Electronics</a> </div> </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>
1 answers
solution1
2 ACCPTED 2021-04-05 11:21:16
You had a lot of errors in the code. Like in li , you gave css as display: inline; ; and the sub-menu you didn't give any positions like position: absolute;
I have applied my changes below.
Thanks me later.
.redirect:hover{background-color:#aac8ff;} div{background-color:#ccd9fb;} h1{font-size: 20px; padding-left:10px;}.dropdown-content a{background-color:#aac8ff}.container:hover.dropdown-content{transform: scaleY(1);}.dropdown-content a:hover {background-color: #99b7ff;} li.container{display:inline-block;position:relative;} li{display:inline-block;} body { background-color: #eefbfb; font-family: 'Inconsolata', monospace; }.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; float:right; }.dropdown-content{ z-index:1; min-width:auto; max-width:155px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background-color:#99b7ff; position: absolute; top: 100%; left:0; transition: .3s linear; transform-origin: top; transform: scaleY(0); max-height: 400px; overflow: auto; }.dropdown-content a{ color:#fff; display:block; padding: 10px 13px; text-decoration:none; text-align: center; }
<body> <div class="top"> <h1>123Calculator</h1></span> <ul> <li class="container"> <a class="redirect" href="physics.html">Physics</a> <div class="dropdown-content"> <a href="Physics/1.PhotNEnLvl.html">Phontons and Energy levels</a> <a href="Physics/2.Waves.html">Waves</a> <a href="Physics/3.Mech.html">Mechanics</a> <a href="Physics/4.Mat.html">Materials</a> <a href="Physics/5.Elect.html">Electricity</a> <a href="Physics/6.CircMot.html">Circular Motion</a> <a href="Physics/7.SimpHarMot.html">Simple Harmonic Motion</a> <a href="Physics/8.TherPhy.html">Thermal Physics</a> <a href="Physics/9.GravFie.html">Gravitational Fields</a> <a href="Physics/10.ElecFieNCap.html">Electric Fields and Capacitors</a> <a href="Physics/11.MagFie.html">Magnetic Fields</a> <a href="Physics/12.NukePhy.html">Nuclear Physics</a> <a href="Physics/13.Astro.html">Astrophysics</a> <a href="Physics/14.MedPhy.html">Medical Physics</a> <a href="Physics/15.EngPhy.html">Engineering Physics</a> <a href="Physics/16.TurnPInPhys.html">Turning Points in Physics</a> <a href="Physics/17.Electronics.html">Electronics</a> </div> </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.
Related Question
Hiding a CSS Dropdown Menu in IE
Hiding sidebar and dropdown menu
HTML and CSS caret dropdown menu
HTML/CSS Hover Dropdown Menu
Hiding dropdown menu on hover issues
Dropdown Menu using javascript, HTML and CSS
HTML/CSS Dropdown navigation menu not showing
how to make dropdown menu using html & css
DropDown menu with Scroll View in HTML and CSS
Dropdown menu closing problem - Javascript / Css / Html
Related Tags