Template:BIMATOX Project


.dropdown-content a { 

   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;

}

.dropdown-content a:hover { 

   background-color: #ddd;

}

.show { 

   display: block;

} </style> </head> <body> 

 <a href="#home">Home</a>
 <a href="#news">News</a>

   <button class="dropbtn" onclick="myFunction()">Dropdown
     
   </button>

     <a href="#">Link 1</a>
     <a href="#">Link 2</a>
     <a href="#">Link 3</a>

Dropdown Menu inside a Navigation Bar

Click on the "Dropdown" link to see the dropdown menu.

<script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { 

   document.getElementById("myDropdown").classList.toggle("show");

}

// Close the dropdown if the user clicks outside of it window.onclick = function(e) { 

 if (!e.target.matches('.dropbtn')) {
   var myDropdown = document.getElementById("myDropdown");
     if (myDropdown.classList.contains('show')) {
       myDropdown.classList.remove('show');
     }
 }

} </script> </body> </html>