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...

• Home
• About
• Services ▼
  • Web Design
  • Graphic Design
  • App Design
• News
• Contact

And now the code...

The HTML...

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

<div class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li> <a href="#">Services ▼ </a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">App Design</a></li> </ul> </li> <li><a href="#">News</a></li> <li><a href="#">Contact Us</a></li> </ul> </div>
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.