Question

以前，当我的标题只有3个标题时，我没有包装问题，但是在添加另一个标题后，该特定标题会错误地放在实际标题之上。

期望结果图：https://i.gyazo.com/3a71cc861daf2ec897cceed30d4bb576.png

Codepen：https://codepen.io/valik140795/pen/qadXOo

我认为问题来自下拉按钮定位（如果不是css），但我无法专门找到问题。

重新定位自己的标题按钮的代码：

<body>
<div class="body">
<div class="block_header">
  <div class="lang"><a href="updatethislinkforrussianversion">RU</a> | <a href="updatethislinkforenglishversion">ENG</a></div>
  <a href="index.html"><img src="pictures/logo.png" class="logo" width="220px;" /></a>


  <ul>
    <style>
      .dropbtn {
          background-color: #282828;
          color: #AA9568;
          padding: 0px;
          font-size: 16px;
          border: none;
          cursor: pointer;
      }

      .dropbtn:hover, .dropbtn:focus {
          background-color: #282828;
      }


      .dropdown {
          position: relative;
        z-index: 999;
          display: inline-block;
      }

      .dropdown-content {
          display: none;
          position: fixed;
        z-index: 999;
          background-color: #282828;
          min-width: 180px;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      }

      .dropdown-content a {
          color: #AA9568;
          padding: 3px 5px;
          text-decoration: none;
          display: block;
      }

      .dropdown a:hover {background-color: #282828}

      .show {display:block;}
    </style>

    <div class="dropdown">
      <button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a></button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#nobilis">Nobilis</a>
        <a href="#colordeseda">Color de Seda</a>
        <a href="#eugenio">Eugenio Colombo</a>
        <a href="#libra">Libra</a>
      </div>
    </div>

    <script>
      /* When the user clicks on the button,
      toggle between hiding and showing the dropdown content */
      function myFunction() {
          document.getElementById("myDropdown").classList.toggle("show");
      }

      function filterFunction() {
          var input, filter, ul, li, a, i;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          div = document.getElementById("myDropdown");
          a = div.getElementsByTagName("a");
          for (i = 0; i < a.length; i++) {
              if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                  a[i].style.display = "";
              } else {
                  a[i].style.display = "none";
              }
          }
      }
    </script>

提前致谢。

Answer 1

位于顶部的下拉元素位于保存其他三个元素的 ul 元素之外，您应该将它放在与它们相同的父容器中。

标题段落和错误本身

1 个答案: