Question

我几乎让我的下拉菜单工作，但是当点击它时，我无法将下拉内容显示在头部下方。它被移到了一边。是什么原因造成的？这是不正确的写作位置吗？

小提琴：https://jsfiddle.net/kiddigit/8sxj3eeg/

  * {
    font-family: garamond;
    line-height: 1.9em;
  }

.dropdownwrapper {
  padding-top: 2px;
}

.dropbtn {
    color: black;
    padding: 13px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
/*    display: none;*/
    position: absolute;
}

.dropdown-content a {
    color: white;
    padding: 0 27.5px ; 
    text-decoration: none;
    display: block;
    background-color: #3f3f3f;
}

.dropdown-content a:hover {
  color: #a9a9a9;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: black;
    color: white;
}


header {    
    border-bottom: 5px solid;
    margin-bottom: 10px;
    overflow: hidden;
}

header ul {   
  float: right;
  list-style-type: none;
  margin-top: 22px;
  padding:0;
  width: 50%;
}

header li {   
  float: right;
}

header li a {   
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

header li a:hover {
  background-color: #111;
  color: white;
}

header h1 {   
  float: left;
  text-align: left;
  line-height: 0;
  font-size: 2em;
}

<header>
  <h1><a href="index.html">Father Bart Gage</a></h1>
  <ul>
    <li><a id="about" href="#">ABOUT</a></li>
    <li><a href="<!-- mailto:chris.gage@gmail.org -->">CONTACT</a></li>
  <div class="dropdownwrapper">
    <div class="dropdown">
         <li><div class="dropbtn" onClick=”return true”>SCRIPTURE</div></li>
      <div class="dropdown-content">
          <a id="mark" href="#">Mark</a>
          <a id="matthew" href="#">Matthew</a>
          <a id="luke" href="#">Luke</a>
          <a id="john" href="#">John</a>
      </div> 
    </div>
    </div>
    </ul>
</header>

Answer 1

您必须将dropdown-content元素移动到列表项中：

<div class="dropdown">
      <li>
          <div class="dropbtn" onClick=”return true”>SCRIPTURE</div>

          <div class="dropdown-content">
              <a id="mark" href="#">Mark</a>
              <a id="matthew" href="#">Matthew</a>
              <a id="luke" href="#">Luke</a>
              <a id="john" href="#">John</a>
          </div> 
     </li>
</div>

Answer 2

有一些事情正在发生，可能需要一些关注。

首先，<div>元素在技术上并非“合法”，因为它是ul元素的直接子元素。 ul的唯一直接孩子应该是li。为了解决这个问题，我已将您的下拉列表移到 li内。

其次，你可能会遭受一些“div-itis”。您可能（当然？）不需要这么多div元素来完成您想要的任务。我在下面的标记下面提出了备用标记。

第三，全部是关于位置：当您设置position: absolute时，位置（顶部，右侧，底部，左侧）与最近的父级position: relative相对。因此，您可能希望确保li元素具有position: relative。

您的原始标记，其中的div包含在li

中

<header>
  <h1><a href="index.html">Father Bart Gage</a></h1>
  <ul>
    <li><a id="about" href="#">ABOUT</a></li>
    <li><a href="<!-- mailto:chris.gage@gmail.org -->">CONTACT</a></li>
    <li>
        <div class="dropdownwrapper">
            <div class="dropdown">
               <div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
                  <div class="dropdown-content">
                      <a id="mark" href="#">Mark</a>
                      <a id="matthew" href="#">Matthew</a>
                      <a id="luke" href="#">Luke</a>
                      <a id="john" href="#">John</a>
                  </div> 
                </div>
            </div>
        </li>
    </ul>
</header>

替代建议的标记
（请注意，这也需要更改样式 - 请参阅那些小提琴！）

<header>
  <h1><a href="index.html">Father Bart Gage</a></h1>
  <ul>
    <li><a id="about" href="#">ABOUT</a></li>
    <li><a href="<!-- mailto:chris.gage@gmail.org -->">CONTACT</a>
      <!-- nested ul for the dropdown, rather than divs -->
      <li>
        <div class="dropbtn" onClick=”return true”>SCRIPTURE</div>
        <ul class="dropdown dropdown-content">
          <li><a id="mark" href="#">Mark</a></li>
          <li><a id="matthew" href="#">Matthew</a></li>
          <li><a id="luke" href="#">Luke</a></li>
          <li><a id="john" href="#">John</a></li>
        </ul>
      </li>
  </ul>
</header>

Working Fiddle使用备用建议标记。

是什么让下拉菜单内容“粘贴”到菜单项？

2 个答案: