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 个小时试图弄清楚如何制作它，以便下拉列表位于“数学”下而不是覆盖它。

戴尔兰德里

您的.dropdown-content位置为absolute，将topcss 规则添加到该选择器并将dropdown-content 元素向下推到主导航下方。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。