Drop down menu using pure CSS
January 25, 2017 | 3011 Views

Drop down menu using pure CSS

Learn how to enable accessibility of sub menus (drop-down) in horizontal navigation by applying pure CSS, no javascript.

And also learn horizontally centering or evenly distributed navigation menu using CSS.

Creating The Structure

The basic HTML structure of the drop down navigation menu is displayed below. Here, the ul tag is used to create the horizontal navigation menu for our website.

And we have ul.hidden class inside of the li.drop-down which contains the sub navigation menus.

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="drop-down"><a href="#">Services ▼</a>
       <ul class="hidden">
           <li><a href="#">Branding</a></li>
           <li><a href="#">UI/UX</a></li>
           <li><a href="#">Apps</a></li>
       </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

Add Styling

The following are the CSS to perform the styles for the horizontally centering or evenly distributed drop down navigation menu.

firstly we are going to style the ul.menu to bring horizontally centering ul and evenly distributed & centered li or a tags.

.menu{
    margin: 0 ;
    padding: 0;
    clear: both;
    text-align: center;
    display: table;
    width: 100%;
  }
  .menu > li{
    list-style-type: none;
    float: left;
    display: table-cell;
    padding: 0px;
    width: 25%;
    margin: 0;    
  }
  .menu > li a{
    display: block;
    padding: 15px;
    background-color: #34495e;
    color: #fff;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif; 
  }
  .menu > li a:hover{
    background-color: #2c3e50;
  }
  
  

Following are the CSS code to style the sub navigation menu which has the class ul.hidden. Initially, the ul.hidden is going to be invisible. When the li.drop-down is hovered, that moment the ul.hidden will be visible by using CSS.

.hidden{
      margin: 0;
    padding: 0;
    display: none;
  }
  .hidden li{
    display: block;
    margin: 0;
    padding: 0;
  }
  li.drop-down:hover .hidden, .hidden:hover{
   display: block;
  }
  

Live demo

See the Pen Drop down menu using pure CSS by themeswild (@themeswild) on CodePen.





Free html templates

Download from a vast library of Open Source HTML & CSS templates and use them for free. No licenses required. Apart from that, do you need to build a whole website from scratch? Write to us anytime and we will get it sorted.

Contact Us

More Links