HTML and CSS only Drop Down Menu

Ok, let's keep this simple, that what you want after all isn't it!

The Look...

simple drop down menu

The Menu In Action...









And now the code...




The HTML...

Copy and paste the code below into your webpage. Edit the Text and links to suit your site.


The down arrow is achieved using the symbol code "& # x 2 5 B C" (without the spaces)

The CSS...

Copy and paste the code below into your CSS stylesheet. Edit the colours and padding to suit your site.

.navbar ul {
text-align: left;
display: inline;
margin: 0px ;
padding: 15px 4px 17px 0px ;
list-style: none ;
}

.navbar ul li {
font: bold 16px sans-serif;
color:#fff;
display: inline-block;
margin-right: -3px;
position: relative ;
padding: 15px 20px ;
background: #0099CC ;
}

.navbar ul li:hover {
background: #555;
color: #fff;
}

.navbar ul li ul {
padding: 0 ;
position: absolute;
top: 43px;
left: 0 ;
width: 180px ;
display: none ;
opacity: 0 ;
visibility: hidden;
-webkit-transiton: opacity 0.2s ;
-moz-transition: opacity 0.2s ;
-ms-transition: opacity 0.2s ;
-o-transition: opacity 0.2s ;
-transition: opacity 0.2s ;
}

.navbar ul li ul li {
background: #555 ;
display: block;
color: #fff ;
text-shadow: 0 -1px 0 #000;
}

.navbar ul li ul li:hover { background: #666; }

.navbar ul li:hover ul {
display: block ;
opacity: 1 ;
visibility: visible;
}



More web tips,templates and tutorials coming soon as part of our "month of web" at OnlineDesignTeacher. Follow us on Twitter and Facebook to be sure you don't miss out.