Back To Normal
Click Here To Subscribe Via Email

Subscribe To Our E-Mail Newsletter

Saturday, February 6, 2016

How to Create a Dropdown Menu in HTML with CSS


Couch ModePrint It


In this tutorial we will share how to create a simple dropdown navigation or menu bar using HTML and CSS.

Many dropdown menus we tend to see on websites use JavaScript in a way, however it's doable to create one entirely with HTML and CSS. We'll benefit from useful CSS selectors to create a simple dropdown navigation menu.




Meta Tag

Make sure the following meta tag is present in your page's <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


The Markup

We will create a parent div tag which will have our <ul> tag. The <ul> contains a series of <li>s. The markup is simple and clean.
 <div class="navbar">  
    <ul>  
     <li><a class="active" href="#">Home</a></li>  
     <li><a href="#">Menu 1</a>  
      <ul>  
       <li><a href="#">Submenu 1</a></li>  
       <li><a href="#">Submenu 2</a></li>  
       <li><a href="#">Submenu 3</a></li>  
      </ul>  
     </li>  
     <li><a href="#">Menu 2</a>  
      <ul>  
       <li><a href="#">Submenu 1</a></li>  
       <li><a href="#">Submenu 2</a></li>  
       <li><a href="#">Submenu 3</a></li>  
      </ul>  
     </li>  
     <li><a href="#">About us</a></li>  
           <li><a href="#">Privacy Policy</a></li>  
           <li><a href="#">Contact us</a></li>  
    </ul>  
   </div>  

The first sets of sub-menus can then be added under the "Menu 1" & "Menu 2" links, each being a complete unordered list inserted within the <li> of its parent menu item.

The secondary sub-menu is nested beneath the "Menu 1" choice of the primary sub-menu. These links are placed in to a different unordered list & inserted into the Menu 1's <li>



The CSS

Let’s begin the CSS by obtaining the fundamental dropdown practicality operating. With CSS specificity and advanced selectors we are able to target individual parts buried deep within the HTML structure while not the necessity for additional IDs or classes.
 <style>  
 body{  
  margin: 0px;  
  padding: 0px;  
  border: 0;  
  background-color:grey;  
  width:auto;  
  font-size: 100%;  
  font: inherit;  
  vertical-align: baseline;  
 }  
 .navbar ul {  
  list-style: none;  
  background-color: #383838;  
  padding: 0;  
  margin: 0;   
  border-bottom:5px solid orange;  
 }  
 .navbar li {  
  font-family: 'Oswald', sans-serif;  
  font-size: 1.2em;  
  line-height: 40px;  
  text-align: left;  
 }  
 .navbar a {  
  text-decoration: none;  
  color: #fff;  
  display: block;  
  padding-left: 15px;   
 }  
 .navbar a:hover {  
  background-color: grey;  
 }  
 .navbar a.active {  
  background-color: #aaa;  
  color: #444;  
  cursor: pointer;   
 }  
 .navbar li li {  
  font-size: 0.8em;  
 }  
  .navbar li {  
   width: 160px;  
   border-bottom: none;  
   height: 50px;  
   line-height: 50px;  
   font-size: 18px;  
   display: inline-block;  
   margin-right: -4px;  
  }  
  .navbar a {  
   border-bottom: none;  
  }  
  .navbar > ul > li {  
   text-align: center;  
  }  
  .navbar > ul > li > a {  
   padding-left: 0;  
  }  
  .navbar li ul {  
   position: absolute;  
   display: none;  
   width: inherit;  
   border-bottom:none;  
  }  
  .navbar li:hover ul {  
   display: block;  
  }  
  .navbar li ul li {  
   display: block;  
  }  
      </style>  


The Completed Pure CSS Dropdown Menu





:D
:)
:[
;)
:D
:O
(6)
(A)
:'(
:|
:o)
8)
(K)
(M)