How to Code a Responsive Dropdown Menu Using HTML and CSS | Hover Over Dropdown Menu

Create Responsive Navigation Menu Bar Using HTML CSS only
Create Responsive Navigation Menu Bar Using HTML CSS only
If you are trying to code your own drop down menu using the HTML and CSS language, this article is for you. You can learn how to code a responsive drop down menu that works on any device with this step by step tutorial.
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

How do I create a responsive dropdown menu using HTML and CSS?

We are going to be exploring how to code a responsive dropdown menu using HTML and CSS only. This will be an informative post that is helpful for anyone who wants to learn about coding them!

A dropdown menu is usually used on websites as a way of making navigation easier. It can also be used for things like displaying prices, or contact information. They’re perfect for any situation where you want something more than just text links because they allow the user to quickly find what they need without scrolling around.

I’m excited about this tutorial because it’s really easy and will help you learn some basics about HTML and CSS! Let’s get started…

Steps to create drop down menu in HTML on mouseover

In this blog post, I will show you how to create a responsive dropdown menu using HTML and CSS. The following steps are required to make a responsive dropdown with a submenu:

  1. Create the basic HTML structure for the navigation bar.
  2. Add required classes in HTML code that will be used for styling in CSS which is needed later on in the process.
  3. Write HTML to create a responsive dropdown menu items
  4. Use CSS to style your navigation bar with responsive dropdown.
  5. Create the submenu items inside the dropdown menu
  6. Add CSS media quries to make things mobile responsive with your new dropdown submenu.

The following resources were used in writing this article – Code Academy, W3Schools, Codecademy, and Treehouse Blog.

Create the responsive navigation menu bar using HTML CSS only

In the previous tutorial, I have already created the responsive navigation menu bar is made with simple HTML and CSS. It has the latest features to make it more functional, including an intuitive design that will suit your needs perfectly!

You can get the source code from the below link, to create a responsive navigation menu bar for your website.


Recommended Post: How to Create Responsive Menu Bar Using HTML And CSS Only


Video Toturial: How to Make Responsive Dropdown Menu Using HTML and CSS

Now, I am going to share with you a complete video tutorial to create a responsive drop-down menu with a submenu in HTML and CSS. It is a hover over drop-down menu bar in HTML and CSS.

How do I create a drop-down menu in HTML and CSS?

Source Codes (Responsive Dropdown Menu Using HTML and CSS)

It’s time to get source codes to create a drop-down menu bar in HTML and CSS only.

Responsive Navigation Bar with Drop Down (HTML Code)

Now, below is The HTML code to create a responsive navigation menu bar with drop-down menus. This responsive navbar contains a logo, menu links, and a login button. The navigation bar also includes the multi-level dropdown menus.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>

<body>
  <div class="navbar">

    <!-- Navbar logo -->
    <div class="nav-header">
      <div class="nav-logo">
        <a href="#">
          <img src="logo.png" width="100px" alt="logo">
        </a>
      </div>
    </div>

    <!-- responsive navbar toggle button -->
    <input type="checkbox" id="nav-check">
    <div class="nav-btn">
      <label for="nav-check">
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>

    <!-- Navbar items -->
    <div class="nav-links">
      <a href="#">Home</a>
      <a href="#">About</a>

      <!-- Dropdown menu -->
      <div class="dropdown">
        <a class="dropBtn" href="#">Services
          <i class="fas fa-angle-down"></i>
        </a>
        <div class="drop-content">
          <a href="#">Web Design</a>
          <a href="#">Marketing</a>
          <a href="#">WordPress</a>

          <!-- Creating sub menu Dropdown -->
          <div class="dropdown2">
            <a class="dropBtn2" href="#">More
              <i class="fas fa-angle-right"></i>
            </a>
            <div class="drop-content2">
              <a href="#">HTML</a>
              <a href="#">CSS</a>
              <a href="#">JavaScript</a>
              <a href="#">jQuery</a>
            </div>
          </div>
        </div>
      </div>

      <a href="#">Blogs</a>
      <a href="#">Contact</a>
      <button class="loginBtn">Login</button>
    </div>

  </div>
</body>

</html>

Responsive drop down menu with submenu (CSS Code)

Create a Responsive navigation menu bar using CSS only. We can use standard HTML and CSS, or we could make our site more mobile-friendly by adding media queries to cater to smaller screens (like smartphones).

A dropdown element provides an easy way of navigating between various pages on your website without having page reloads – just click the highlighted option that you want! Below is the CSS code of a responsive navigation bar with dropdown menus.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-image: url(background-img.jpg);
  background-size: cover;
  background-attachment: fixed;
}
.navbar{
  height: 70px;
  width: 100%;
  padding: 19px 30px;
  background-color: #1b4cd3;
  position: relative;
}
.navbar .nav-header{
  display: inline;
}
.navbar .nav-header .nav-logo{
  display: inline-block;
  margin-top: -7px;
}
.navbar .nav-links{
  display: inline;
  float: right;
  font-size: 18px;
}

.navbar .nav-links .loginBtn{
  display: inline-block;
  padding: 5px 15px;
  margin-left: 20px;
  font-size: 17px;
  color: rgb(9, 14, 90);
}
.navbar .nav-links a {
  padding: 10px 12px;
  text-decoration: none;
  font-weight: 550;
  color: white;
}
/* Hover effects */
.navbar .nav-links a:hover{
  background-color: rgba(0, 0, 0, 0.3);
}

/* responsive navbar toggle button */
.navbar #nav-check, .navbar .nav-btn{
  display: none;
}

@media (max-width:700px) {
  .navbar .nav-btn{
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .navbar .nav-btn label {
    display: inline-block;
    width: 80px;
    height: 70px;
    padding: 25px;
  }
  .navbar .nav-btn label span {
    display: block;
    height: 10px;
    width: 25px;
    border-top: 3px solid #eee;
  }
  .navbar .nav-btn label:hover, .navbar #nav-check:checked ~ .nav-btn label {
    background-color: rgb(9, 14, 90);
    transition: all 0.5s ease;
  }
  .navbar .nav-links{
    position: absolute;
    display: block;
    text-align: center;
    width: 50%;
    background-color: rgb(9, 14, 90);
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 70px;
    right: 0px;
  }
  .navbar .nav-links a {
    display: block;
  }

  /* when nav toggle button not checked */
  .navbar #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }

  /* when nav toggle button is checked */
  .navbar #nav-check:checked ~ .nav-links {
    height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .navbar .nav-links .loginBtn {
    padding: 10px 40px ;
    margin: 20px;
    font-size:  18px;
    font-weight: bold;
    color: rgb(9, 14, 90);
  }
  /* Responsive dropdown code */
  .navbar .nav-links .dropdown, .navbar .nav-links .dropdown2 {
    float: none;
    width: 100%;
  }
  .navbar .nav-links .drop-content, .navbar .nav-links .drop-content2 {
    position: relative;
    background-color: rgb(220, 220, 250);
    top: 0px;
    left: 0px;
  }
  /* Text color */
  .navbar .nav-links .drop-content a {
    color: rgb(9, 14, 90);
  }  

}

/* Dropdown menu CSS code */
.dropdown{
  position: relative;
  display: inline-block;
}
.drop-content, .drop-content2 {
  display: none;
  position: absolute;
  background-color: #1b4cd3;
  min-width: 120px;
  font-size: 16px;
  top: 34px;
  z-index: 1;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}
/* on hover show dropdown */
.dropdown:hover .drop-content, .dropdown2:hover .drop-content2 {
  display: block;
}
/* drondown links */
.drop-content a {
  padding: 12px 10px;
  border-bottom: 1px solid rgb(197, 197, 250);
  display: block;
  transition: all 0.5s ease !important;
}
.dropBtn .drop-content a:hover {
  background-color: rgb(230, 230, 230);
}
.dropdown:hover .dropBtn, .dropdown2:hover .dropBtn2 {
  background-color: rgba(0, 0, 0, 0.3);
}
.dropdown2 .drop-content2 {
  position: absolute;
  left: 120px;
  top: 126px;
}
.dropBtn2 i {
  margin-left: 15px;
}

Final Output

Finally, after the execution of the above HTML and CSS codes in your code editor, you will get the following output. The navigation dropdown menu bar is mobile responsive and can auto resizable in all media devices.

Code a Responsive Dropdown Menu Using HTML and CSS
Code a Responsive Dropdown Menu Using HTML and CSS

After that, if you decrease the screen size the navigation menu bar is also mobile responsive. The below image shows the mobile responsive output.

Final Words

Thank you for following along with this blog post and taking the time to learn about how to create a navigation bar. Next, we will be going over some CSS tips that can help make your website look even more polished.

The first tip is to add media queries so that the font size on your website scales down when viewed on mobile devices. As always, I hope you have enjoyed reading my informative blog! If you want to learn more please subscribe to my YouTube channel where I share helpful tutorials like this one all of the time!

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

6 Responses

  1. Definitely believe that which you stated. Your favorite reason appeared to be on the web the easiest thing to be aware of. I say to you, I certainly get irked while people consider worries that they just don’t know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people could take a signal. Will likely be back to get more. Thanks

  2. I carry on listening to the newscast lecture about getting boundless online grant applications so I have been looking around for the top site to get one. Could you advise me please, where could i acquire some?

  3. Thanks , I’ve just been searching for info approximately this topic for a long time and yours is the greatest I have discovered so far. But, what about the conclusion? Are you positive in regards to the supply?

Leave a Reply

Your email address will not be published.