How to Create Drop Down Menu with HTML and CSS

Today we’re going to make a responsive dropdown menu with html and css and Jquery. Actually, I will use a little jquery code to create dropdown menu. I will show you how you can easily make a responsive dropdown menu. It’s an open source project, so you can use it for your own project so let’s start.

You can see what you are want to make by clicking on view demo and see what happened.

Read Also: A Brand New Multipurpose Theme That You Can Use for All Websites

Table of Contents

  1. Skip to the HTML
  2. Skip to the CSS
  3. Skip to the Jquery
  4. Skip to the Responsive

1.HTML Structure

First of all, create html file.

 <!-- start mainmenu -->
 <section class="primary-menu">
    <div class="container">
      <!-- small device section -->
      <div class="responsive-menu">
        <span class="menu-btn">
          <i class="fa fa-bars"></i>
        </span>
      </div>
        <!-- end small device -->

        <!-- start menu area -->
      <div class="menu-area">
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">Layout</a></li>
          <li><a href="#">Our Course</a>
            <!-- start submenu -->
        <ul class="submenu">
          <li><a href="#">Web Development</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Search Engine Optimization</a></li>
        <li><a href="#">Wordpress theme Development</a></li>
            </ul><!-- end submenu -->
          </li>
          <li><a href="#">Online Tranning</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Protfolio</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
      </div><!-- end main menu area -->
    </div>
  </section>
  <

Menu Wrapper and Container

Create a menu wrapper named primary-menu class which is the parent class. You may use a background color whichever you want. The container used to bring the menu into 1140px. You must used max-width:1140px for a container in CSS.

 <section class="primary-menu">
     <div class="container">
<! -- For menu section   --> 
      </div>
</section>

Unordered List

In this section, we make a simple menu for our project using ul tag (ul tag define as menu class).

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Layout</a></li>
  <li><a href="#">Our Course</a></li>
  <li><a href="#">Online Training</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Protfolio</a></li>
  <li><a href="#">About Us</a></li>
</ul>

Nested Dropdown Menu

Now create another unordered list into any li tag. Here create another unordered list using ul tag (ul tag define as submenu class) in our course li tag.

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Layout</a></li>
  <li><a href="#">Our Course</a>
    
<! -- start submenu -->
    <ul class="submenu">
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Graphic Design</a></li>
      <li><a href="#">Search Engine Optimization</a></li>
      <li><a href="#">Wordpress theme Development</a></li>
    </ul><! -- End submenu -->
</li>

  <li><a href="#">Online Training</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Protfolio</a></li>
  <li><a href="#">About Us</a></li>
</ul>

Responsive Menu

For responsive section, we take an extra div named responsive-menu for small devices. Especially, it’s visible when the device has come.I’ll show how when it shows and hidden and why it’s happened later.


  <div class="responsive-menu">
    <span class="menu-btn">
      <i class="fa fa-bars"></i>
    </span>
  </div>

2. Styling with CSS

After completing html structure, it’s time to need styling. For styling, add file path
between head tag.

[Since I was kept this file into assets folder inside of css folder, so used this (assets/css/style.css) path. You may change your path whatever you want]

Main StyleSheet

/* menu section */
.primary-menu {
    background: #29B899;
    display: inline-block;
    width: 100%;
}
    /*main menu area*/
.menu-area{}
.menu-area .menu{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.menu-area .menu li{
    float: left;
    position: relative;
}
.menu-area .menu li a {
    text-decoration: none;
    padding: 15px 20px;
    display: inline-block;
    color: #fff;
    transition: all .3s ease;
    line-height: 28px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}
.menu-area .menu li a:hover{
    background: #fff;
    color: #29B899;
}
        /*end main menu area*/

        /*start submenu*/
.menu-area .menu li .submenu {
    position: absolute;
    width: 300px;
    background: #29B899;
    list-style: none;
    left: 0;
    display: none;
    margin: 0;
    padding: 0;
}
.menu-area .menu li .submenu li {
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e0d5d5;
}
.menu-area .menu li .submenu li a {
    display: block;
}
.menu-area .menu li .submenu li a:hover{
}
    /*end submenu*/

/*to working dropdown menu*/
.menu-area .menu li:hover .submenu{
    display: block;
}
  /*  responsive option  */
.responsive-menu{
    display: none;
}
span.menu-btn{
    display: block;
    padding: 15px 15px;
    color: #fff;
    display:inline-block;
}

/* responsive menu for small device*/
@media  (max-width: 768px) {
.header-section{
    width: 100%;
    }
    /* hidden the large menu */
.menu-area {
    display: none;
    }
    /*enable responsive menu*/
.responsive-menu{
    display: block;
    }

    /*styling menu area*/
.menu-area .menu li a{
    color: #29B899;
}
.menu-area .menu li {
    float: left;
    position: relative;
    width: 100%;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}
}
.empty{
    padding: 200px 0px;
}

Styling Primary Menu and Container

Fixed a color of your menu and set max-width 100%.

Styling Unordered List

  /* primary menu */
 .primary-menu {
    background: #29B899;
    display: inline-block;
    width: 100%;
}

We want to keep the menu section between 1140px and middle of the section so for this

.container{
   max-width: 1140px;
   margin: auto;
}

By adding a menu-area parent class, we style this menu section.

Menu Class

Since we defined ul class as menu, in that we want to make this unorder list so we set list-style: none; and set width:100%. ul tag get a default margin and padding from the browser, so we set margin and padding 0px for ul tag.

 /*main menu area*/
.menu-area .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

Now setting float left since we want to show all menu list in the same line. And keep position relative for the drop-down menu.

.menu-area .menu li{
	float: left;
	position: relative;
}

Styling each menu-item content I think you should know about a tag.

.menu-area .menu li a {
    text-decoration: none;
    padding: 15px 20px;
    display: inline-block;
    color: #fff;
    transition: all .3s ease;
    line-height: 28px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}

Set up an over effect for a tag

  .menu-area .menu li a:hover{
	background: #fff;
	color: #29B899;
}

Styling Unordered List

It’s the most exciting section of this project. You know that’s in the previous section I was made a section position relative so here I will position:absolute (.menu-area .menu li .submenu ) to position it according to (menu-area .menu li). And left:0 to start with at the starting point of (menu-area .menu li). This the add property display:none to hidden this section and when hover (menu-area .menu li) then you show the submenu((.menu-area .menu li .submenu ).

   /*start submenu*/
.menu-area .menu li .submenu {
    position: absolute;
    width: 300px;
    background: #29B899;
    list-style: none;
    left: 0;
    display: none;
    margin: 0;
    padding: 0;
    z-index: 333;
}

Styling (.menu-area .menu li .submenu) li ;It’s styling asking your mind.

.menu-area .menu li .submenu li {
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e0d5d5;
}

Show Submenu-menu Area

It helps you to show dropdown menu and creates a hover effect to (menu-area .menu li)

.menu-area .menu li:hover .submenu{ display: block; z-index: 3333; }

Responsive Option

For responsive this device section we used these CSS properties. It’s would be enable when or find small device. First of all you may need to add this section between head section otherwise it’s doesn’t work.

Responsive Style

Initial step we keep it display:none and later on show in largest device mode.

.responsive-menu{
	display: none;
}

Styling the responsive menu button. I will include here font-awesome and include a link between tag.
You may also download font-awesome from http://fontawesome.io/

In Responsive Mode

When a user uses a website, what he comes to see. This website would be automatically responsive. In this time the largest menu would be hidden and show the mobile menu option . How it’s possible let’s start.

Responsive Menu for Small Device

When our website come to small device which screen size less than 768px then,

@media (max-width: 768px) {
    /* hidden the large menu */
.menu-area {
    display: none;
}
    /*enable responsive menu*/
.responsive-menu{
	display: block;
}

Styling Dropdown Menu in Responsive Mode

/*styling submenu menu area*/
.menu-area .menu li a{
    color: #29B899;
}
.menu-area .menu li {
    float: left;
    position: relative;
    width: 100%;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

 Using Jquery

We use jquery to create an event.
First of all add install jquery before the end of tag
You also download Jquery from
https://jquery.com/

You can also use cdn of javascript

We use this script after installing Javascript.
<script type=”text/javascript” src=”assets/js/jquery.min.js”>

Jquery File for Menu

$(document).ready(function(){
  $(".menu-btn").click(function(){
    $(".menu-area").slideToggle(400);
      });
});

When you click on the button then you show the main menu. And here menu area to displaying section.
Button class called by click function and then the slideToggle to mainmenu.

Hope, this tutorial will help you to make your dropdown menu with HTML and CSS. If you have any question, please ask us freely through commenting or you can contact us with the Contact Us page.

Written By sunmoon baappy

2 comments

  • Great! Thank you. Really nice post for a web designer to create a beautiful drop down menu. I love this code to create a gorgeous drop down menu. 🙂

    • Thanks for reading the post and to make time for giving your valuable feedback. Any kind of reply from viewers means a lot. Stay with us for more helpful, important and easy to understand articles as we publish regularly.

Leave a Reply

Your email address will not be published. Required fields are marked *