Simple CSS Drop Down Menu

Published by arifur on

This is a very simple CSS Drop Down Menu. This is a pure and Simple CSS Drop Down Menu, no download is required as no images or scripts is used. Simply copy and paste the HTML and CSS code to run this menu on you site or project. You can use the CSS as external stylesheet or as internal stylesheet, its totally up to you.


<ul><li><a href="#">Home</a></li>
  <li><a href="#">Forums</a></li>
  <li><a href="#">Tutorials</a>
      <li><a href="#">Linux</a></li>
      <li><a href="#">Windows</a></li>
      <li><a href="#">Programming</a></li>
	  <li><a href="#">Web Designing</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>


CSS Code

body {
	  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	  padding: 20px 50px 150px;
	  font-size: 13px;
	  text-align: center;
	  background: #787878;

ul  {
	  text-align: left;
	  display: inline;
	  margin: 0;
	  padding: 15px 4px 17px 0;
	  list-style: none;
	  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

ul li  {
	  font: bold 12px/18px sans-serif;
	  display: inline-block;
	  margin-right: -4px;
	  position: relative;
	  padding: 15px 20px;
	  background: #fff;
	  cursor: pointer;
	  -webkit-transition: all 0.2s;
	  -moz-transition: all 0.2s;
	  -ms-transition: all 0.2s;
	  -o-transition: all 0.2s;
	  transition: all 0.2s;


ul li a {
	font: bold 12px/18px sans-serif;
ul li a:hover {color:#FFF;}
ul li:hover {
	  background: #555;
	  color: #fff;
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  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;
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
ul li ul li a {color: #fff;}
ul li ul li:hover { background: #666; color:#000;}
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;


Simple CSS Drop Down Menu

Simple CSS Drop Down Menu

Live Preview



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.