javascript - Need a dropdown menu on already existing navbar -


i had created navigation bar using html, js css. possible have 'dropdown menu submenu' on 1 'site map' without converting whole code or there better code same. have created multiple files using same menu if theres small code replacement, better.

body {margin:0;}  .topnav img {    float: left;    }    .topnav {    overflow: hidden;    background-color: white;  }    .topnav {    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>

it isnt showing exact o/p in snippet. want make responsive.

i have create dropdown

body {margin:0;}  .topnav img {    float: left;    }    .topnav {    overflow: hidden;    background-color: white;  }    .topnav {    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>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -