添加下拉菜单后，我的导航菜单无法正常工作

Question

我的导航菜单有问题。我的导航菜单响应灵敏，因此导航在移动版中使用navicon(汉堡包菜单(。我将其中一个菜单选项卡(公文包(更改为下拉菜单。当我这样做时，公文包选项卡现在与导航菜单的其余部分不一致。在移动版中，它也不在navicon菜单中。我不知道该怎么解决？

function myDropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropButton')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}

.navbar {
overflow: hidden;
background-color: white;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 17px;
text-decoration: none;
font-size: 20px;
font-family: Brush Script MT, Brush Script Std, cursive;
}
.navbar a:hover,
.dropdown:hover .dropButton,
.dropButton:focus {
color: #DCAE1D;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropButton {
cursor: pointer;
font-size: 20px;
border: none;
background-color: inherit;
font-family: Brush Script MT, Brush Script Std, cursive;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
.dropdown-content a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.show {
display: block;
}
.navbar img {
width: auto;
height: 200px;
margin-top: -80px;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar" id="myNavbar">
<a href="index.htm"><img src="arg_logo.jpg" alt="Logo for Amber Rose Photography" /></a>
<a href="index.htm">Home</a>
<a href="arg_bio.htm">About</a>
<div class="dropdown">
<div class="dropButton" onclick="myDropdownMenu()">Portfolio
<i class="fa fa-caret-down"></i>
</div>
<div class="dropdown-content" id="myDropdown">
<a href="arg_gallery.htm#nature">Nature</a>
<a href="arg_gallery.htm#travel">Travel</a>
<a href="arg_gallery.htm#portraits">Portraits</a>
</div>
</div>
<a href="arg_table.htm">Prices</a>
<a href="arg_form.htm">Quote</a>
<a href="arg_contact.htm">Contact</a>
<a href="arg_links.htm">Links</a>
<a href="arg_sitemap.htm">Site Map</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Answer 1

您在.navbar a上有很多样式尚未应用于.dropdown。

我已经编辑了你的CSS，将.dropdown视为导航项目：

function myDropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(e) {
if (!e.target.matches('.dropButton')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}

.navbar {
overflow: hidden;
background-color: white;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 17px;
text-decoration: none;
font-size: 20px;
font-family: Brush Script MT, Brush Script Std, cursive;
}
.navbar a:hover,
.dropdown:hover .dropButton,
.dropButton:focus {
color: #DCAE1D;
}
.dropdown {
float: left;
overflow: hidden;
/* added padding */
padding: 14px 17px;
}
.dropdown .dropButton {
cursor: pointer;
font-size: 20px;
border: none;
background-color: inherit;
font-family: Brush Script MT, Brush Script Std, cursive;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
.dropdown-content a {
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.show {
display: block;
}
.navbar img {
width: auto;
height: 200px;
margin-top: -80px;
}
.navbar .icon {
display: none;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child),
.navbar .dropdown {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}

.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}

/* included .dropdown here */
.navbar.responsive a,
.navbar.responsive .dropdown {
float: none;
display: block;
text-align: left;
}

/* position content relative when in hamburger nav so it doesn't overlap other content */
.dropdown-content {
position: relative;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar" id="myNavbar">
<a href="index.htm"><img src="arg_logo.jpg" alt="Logo for Amber Rose Photography" /></a>
<a href="index.htm">Home</a>
<a href="arg_bio.htm">About</a>
<div class="dropdown">
<div class="dropButton" onclick="myDropdownMenu()">Portfolio
<i class="fa fa-caret-down"></i>
</div>
<div class="dropdown-content" id="myDropdown">
<a href="arg_gallery.htm#nature">Nature</a>
<a href="arg_gallery.htm#travel">Travel</a>
<a href="arg_gallery.htm#portraits">Portraits</a>
</div>
</div>
<a href="arg_table.htm">Prices</a>
<a href="arg_form.htm">Quote</a>
<a href="arg_contact.htm">Contact</a>
<a href="arg_links.htm">Links</a>
<a href="arg_sitemap.htm">Site Map</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>