CODEWITHSUNDEEP
navbarresponsive
ThaneDukes
ThaneDukes

Reputation: 17

Responsive dropdown navbar

I am doing a school project in which I'm not allowed to use Javascript or Bootstrap, and I cannot find a way to make a dropdown menu when the site is opened in smaller screens. Most guides and videos show using Bootstrap or JS and it has gotten me all confused, is it possible to do with just HTML and CSS?. Can anyone give me some quick tips or alternatives? Thank you beforehand!

Upvotes: 0

Views: 108

Answers (1)

hang-coder
hang-coder

Reputation: 440

Answer below using HTML and CSS only.

If my answer works, please check it as final answer and upvote it so other people with same problem will get help too. Cheers

<div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>


<style>
    /* Style The Dropdown Button */
    .dropbtn {
        cursor: pointer;
    }    
    /* The container <div> - needed to position the dropdown content */
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
    }
    
    /* Links inside the dropdown */
    .dropdown-content a {
      color: black;
      padding: 12px;
      text-decoration: none;
      display: block;
    }
    
    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>

Upvotes: 1

Related Questions