html – 是什么让下拉菜单内容“坚持”到菜单项？

概述我几乎让我的下拉菜单工作,但是当点击它时,我无法让下拉内容显示在头部下方.它被移到了一边.是什么原因造成的？是不正确的写作位置？ 小提琴：https://jsfiddle.net/kiddigit/8sxj3eeg/ * { font-family: garamond; line-height: 1.9em; }.dropdownwrapper { padding-to 我几乎让我的下拉菜单工作,但是当点击它时,我无法让下拉内容显示在头部下方.它被移到了一边.是什么原因造成的？是不正确的写作位置？

小提琴：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 >    <div >         <li><div  onClick=”return true”>SCRIPTURE</div></li>      <div >          <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>

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

<div >      <li>          <div  onClick=”return true”>SCRIPTURE</div>          <div >              <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>

总结

以上是内存溢出为你收集整理的html – 是什么让下拉菜单内容“坚持”到菜单项？全部内容，希望文章能够帮你解决html – 是什么让下拉菜单内容“坚持”到菜单项？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。