javascript - 需要现有导航栏上的下拉菜单

Question

我使用 html、js 和 css 创建了一个导航栏。是否可以在不转换整个代码的情况下仅在一个“站点地图”上有一个“带子菜单的下拉菜单”，或者是否有更好的代码。我已经使用相同的菜单创建了多个文件，所以如果只有一个小的代码替换，那就更好了。

body {margin:0;}
.topnav img {
  float: left;  
}

.topnav {
  overflow: hidden;
  background-color: white;
}

.topnav a {
  float: left ;
  display: block;
  color: black;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 20px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  letter-spacing: 1.8px;
}

.topnav .icon {
  display: none;
}

#logo {
  line-height: 0;
  width: 30%;
}
#logo img {
  width: 60%;
  height: auto;
}

.menu a:hover, a:active
{
text-decoration: none;

}
.active, a.active
{
color: orange;
}

<div class="topnav" id="myTopnav">
	<div id="logo"><a href="l"> <img src="images/image"></a></div>
		<a href="index.html">Home</a>
		<a  href="awards.html">Awards</a>
		<a href="site_map.html">Site Map</a>
		<a href="contact_us.html">Contact</a>
		</div>

它没有在片段中显示确切的 o/p。我也想让它响应。

Answer 1

我只创建了下拉列表

body {margin:0;}
.topnav img {
  float: left;  
}

.topnav {
  overflow: hidden;
  background-color: white;
}

.topnav a {
  float: left ;
  display: block;
  color: black;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 20px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  letter-spacing: 1.8px;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.topnav a:hover .dropdown-content {
    display: block;
}
.topnav .icon {
  display: none;
}

#logo {
  line-height: 0;
  width: 30%;
}
#logo img {
  width: 60%;
  height: auto;
}

.menu a:hover, a:active
{
text-decoration: none;

}
.active, a.active
{
color: orange;
}

<div class="topnav" id="myTopnav">
	<div id="logo">
    <a href="l"> <img src="images/image"></a></div>
		<a href="index.html">  <span> Home </span> 
    <div class="dropdown-content">
    <p>1</p>
     <p>2</p>
      <p>3</p>
  </div>
    </a>
		<a  href="awards.html"> <span> Awards </span> 
    
    <div class="dropdown-content">
    <p>4</p>
     <p>5</p>
      <p>6</p>
  </div>
    </a>
		<a href="site_map.html">Site Map</a>
		<a href="contact_us.html">Contact</a>
		</div>