我几乎让我的下拉菜单工作,但是当点击它时,我无法让下拉内容显示在头部下方.它被移到了一边.是什么原因造成的?是不正确的写作位置?
小提琴: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>
解决方法
您必须将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>