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;
}<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>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.
Aucun commentaire:
Enregistrer un commentaire