WebSoftPrograms: How to make a Simple Drop Down Menu in Html & Css

Hi, Guyz! Today I am sharing with you a simple dropdown menu, which is entirely with HTML and CSS.

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<header>
<nav>
<ul>
<li><div class="logo">
<h3>
PureCssDropDown</h3>
</div>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a>
<ul>
<li><a href="#">Service 4</a></li>
<li><a href="#">Service 5</a></li>
<li><a href="#">Service 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a>
<ul>
<li><a href="#">Product 4</a></li>
<li><a href="#">Product 5</a></li>
<li><a href="#">Product 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear">
</div>
</nav>
</header>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0;
   margin:0;
   font-family:Arial, Helvetica, sans-serif;
}
body{
 background-color:#CCC;
}
header{
   height:auto;
   position:relative;
   padding-top:30px;
}
nav{
   background-color:#333;
   width:1024px;
   margin:0 auto;
}
nav .logo{
   color:white;
   background-color:#F60;
   cursor: pointer;
   padding-left:20px;
   padding-right:40px;
 height:60px;
}
.logo h3{
   line-height:3.2em;
   padding-bottom:5px;
}
nav ul{
   list-style:none;
  
}
nav ul li{
   position: relative;
   float:left;
 height:60px;
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
}
nav ul li a{
 font-family:Helvetica, sans-serif;
 font-size:18px;
   text-decoration: none;
   color:#fff;
   width:150px;
   height:30px;
   display: block;
   text-align: center;
   line-height: 3.5em;
   padding-bottom:30px;
}
nav ul ul{
  position: absolute;
  background-color:#5F5F5F;
  display:none;
  
}
nav ul li:hover ul{
  display: block;
  
}
nav ul li:hover{
  background-color:#F60;
}
nav ul ul li a{
  font-size:15px;
  width:140px;
  text-align:left;
  padding-left:10px;
  height:10px;
  line-height: 3.7em;
  display:block;
}
nav ul ul ul{
  position: absolute;
  left:150px;
  top:0px;
  visibility: hidden;
}
nav ul ul li:hover ul{
  visibility: visible;
}
.clear{
   clear:both;
}

How to make a Simple Drop Down Menu in Html & Css

1 comment: