how to add black dropdown horizontal menu for your blogger





1. Log In to your blog's Edit HTML _

2. Check Expand Widget Templates and First Backup your template

3. Find CODE ]]></ b: skin>

Now enter the CSS code!

Under the code you put in this box Before Or Above code ]]></ b: skin>

#menu {
  width: 960px;
  height: 50px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background:#222222 url() repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;  
 -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 10px;
  background: # url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;    
 -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}

/* ACTIVE*/
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background:;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;  
}

/* LIST Sub Menu hidden by default */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM hovering, THE CHILDREN MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 30px;
  position: absolute;
  margin: 30px 0 0 0;
  background: url(../img/menu-child.png) repeat-x;  
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 20px;
  color: #f4f6f7;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 3px;
  padding: 5px;
  background:#222222 url(../img/menu-child.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
  color: #0cb3ea;
  text-decoration: none;
  text-shadow: none;
}

<div id='menu'>
<ul id='nav'>
<li><a href='http://blogtoquick.blogspot.com/'>Home</a>
 <ul>
 </ul>
</li> 
<li><a href='http://blogtoquick.blogspot.com/p/contac-me.html'>Contac Me</a>
 <ul>
 </ul>
</li> 
<li><a href='#'>Free tols css >></a>
 <ul>
 <li><a href='#'>CSS Buttonmaker</a></li>
 <li><a href='#'>CSS 3 click Chart</a></li>
 <li><a href='#'>CSS Compressor</a></li>
 </ul>
</li>

<li><a href='#'>Backlink</a>
 <ul>
 <li><a href='#'>100 free auto backlinks</a></li>
 <li><a href='#'>Backlink generator</a></li>
 </ul>
</li>

<li><a href='#'>Site Map</a>
 <ul>
 </ul>
</li> 
</ul>

</div>