Issue为使我的网站对移动版式具有响应性，我试图在单击菜单按钮时使导航菜单出现。但是，单击不起作用，导航选项也根本没有出现。仅出现导航菜单图标。选项分别显示在菜单按钮下方。但是，我希望它们出现在单击菜单图标上。
.navbar {
width: 100;
text-align: center;
height: 20px;
padding: 35px;
font-size: 10px;
overflow: hidden;
}
.navbar a {
float: left;
font-size: 18px;
text-align: center;
padding: 12px 16px;
text-decoration: none;
color: #0069BD;
font-family: Helvetica;
}
.navbar .current{
border-bottom: 3px solid #0069BD; /* Showing the border under the navigation option on hover */
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
background-color: inherit;
font-family: Helvetica;
margin: 0;
color: #0069BD;
}
.navbar a:hover, .dropdown:hover .dropbtn {
border-bottom: 3px solid #00A0EF;
}
.navbar a {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0069BD;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
font-size: 10px;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 17px;
}
.dropdown-content a:hover {
border-bottom: 3px solid #00A0EF;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
color: white;
}
.show {
display: block;
}
.active {
color: white;
}
.content p{
font-size: 13px;
color: #4e5153;
font-weight: normal;
font-family: 'Arial' sans-serif;
line-height: 20px;
display:inline-block;
}
/* Header Logo */
header div.logo {
padding-top: 14px;
padding-right: 24px;
float: left;
border: red;
}
header div.logo a {
width: 216px;
height: 74px;
float: left;
text-indent: -999em;
}
div.page {
min-height: 400px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}<html><!-- head --><head profile="http://www.w3.org/2005/10/profile"> <!-- image displayed on the tab alongwith the title-->
<link rel="icon" type="image/png" href="images/logo.jpg"> <!-- image displayed on the tab alongwith the title-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- encoding scheme-->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!--title of the tab-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!--icons used in footer-->
<link rel="stylesheet" href="style.css"> <!--stylesheet Linking-->
<script src="jquery.min.js"></script> <!-- javascript used for slider animation-->
<script type="text/javascript" src="slider.js"></script> <!-- javascript used for slider animation-->
</head>
<!-- Body-->
<body>
<div class="page-wrap">
<!--- Header section -->
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" style="height: auto;">
</div>
<!--–– Navigation Bar -->
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<a href="Services.html">Design</a>
<a href="Services.html">Consulting</a>
<a href="Services.html">R&D</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<a href="Software.html">Steam Turbine Design Package</a>
<a href="Software.html">Gas Turbine Design Tools</a>
<a href="Software.html">Power Plant Monitoring</a>
<a href="Software.html">Prognostic System</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<a href="Products.html">ORC Turbine</a>
<a href="Products.html">Gas Turbine</a>
<a href="Products.html">Saturated Team Turbine</a>
</div>
</div>
<a href="About.html">About</a>
<a href="Contact.html">Contact </a>
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!--arrow displayed next to drop-down list-->
</button>
<div class="dropdown-content">
<a href="Marvel_Tech.html"><img src="images/english.png" style="height: auto;"> English </a>
<a href="Marvel_Tech_Chinese.html"><img src="images/chinese.png" style="height: auto;"> Chinese </a> <!--- Mention the name of chinese page in place of hash.-->
</div>
</div>
</div>
</div>
</header></div>
<div class="mobilenavbtn">
<div class="content">
<a href="#"><img src="images/mobilenavbtn.png" alt="Menu" style="height: auto;"></a>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
步骤1）创建HTML：
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
第2步）创建CSS：
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}