WebSoftPrograms: How to create a Horizontal Drop Down Menu in Html & Css

Hello! Today I am sharing with you a simple horizontal dropdown menu, which is entirely with HTML,CSS and without javascript.

Preview Image

Directions :

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

<div id="wrapper">
<h1>
Pure Css3 Drop Down Menu</h1>
<header>
<nav>
<ul>
<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 #</a></li>
<li><a href="#">Service #</a></li>
<li><a href="#">Service #</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>
<ul>
<li><a href="#">Product #</a></li>
<li><a href="#">Product #</a></li>
<li><a href="#">Product #</a></li>
</ul>
</li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear">
</div>
</nav>
</header>
</div>

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

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color:#ccc;
}

.clear{
 clear:both;
}
#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
header{
   height:auto;
   position:relative;
   padding-top:30px;
}
nav{
   background-color:#333;
   width:1024px;
   margin:0 auto;
 border-bottom:3px solid #F60;
 border-radius:5px 5px 0px 0px;
 -webkit-border-radius:5px 5px 0px 0px;
 -moz-border-radius:5px 5px 0px 0px;
 -o-border-radius:5px 5px 0px 0px;
 -ms-border-radius:5px 5px 0px 0px;
}
nav ul{
   list-style:none;
}
nav ul li{
   position:relative;
   float:left;
 height:60px;
 border-right:1px dotted #f60;
}

nav > ul > li:last-child{
 border-right:none;
}

nav > ul > li:first-child{
 border-radius:5px 0px 0px 0px;
 -webkit-border-radius:5px 0px 0px 0px;
   -moz-border-radius:5px 0px 0px 0px;
   -o-border-radius:5px 0px 0px 0px;
 -ms-border-radius:5px 0px 0px 0px;
}

nav > ul > li:hover:after {
 content: "";
 display: block;
 width: 0;
 height: 0;
 position: absolute;
 left: 78%;
 top: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid #F60;
 margin-left: -50px;
}

nav ul li:hover ul{
 display: block;
}
nav ul li a{
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   text-decoration:none;
   color:white;
   width:150px;
   height:30px;
   display:block;
   text-align:center;
   line-height:3.7em;
   padding-bottom:30px;
}
nav ul li a:hover{
 color:#FF802B;
}
nav ul ul{
 width:225px;
   position:absolute;
   background-color:#F60;
   display:none;
}
nav ul ul li{
 position:relative;
   float:left;
 width:225px;
 height:40px;
 line-height: 1em;
 border-right:none;
 border-bottom: 1px dotted #C30;
}
nav ul ul li:hover{
 background-color: #FF802B;
}

nav ul ul li:hover ul{
 visibility: visible;
}
nav ul ul li a{
 font-size:0.9em;
   width:225px;
   text-align:left;
   padding-left:10px;
   height:40px;
   line-height: 3em;
   display:block;
}
nav ul ul li a:hover{
 color:white;
}
nav ul ul ul{
 position: absolute;
 left:225px;
 top:0px;
 visibility: hidden;
}

DOWNLOAD PROJECT SOURCE

How to create a Horizontal Drop Down Menu in Html & Css

No comments:

Post a Comment