Black Apple Drop Down Menu

This menu bar will appear as visitors may use an apple computer. So visitors will attract to navigate through more and more your pages. I have Wrote tutorials before some attractive CSS menu bars, you can check those menu bars also

This is a live example of "Black Apple Drop Down Menu"

• Home
• Products
  • Lables
  • Blogger
  • CSS
• Site map
  • Menu
  • map
• Contact us

To add this navigation bar simply follow below steps.

1. Log in to your blogger dashboard
2. Then click on "Layout" and then on "Add a Gadget"
3. Now select a "HTML/JavaScript" and insert.
4. Now copy and past below codes and save and then arrange it in an proper place.
5. Now you are done and check your menu bar.

CSS Codes:

  <style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#fff;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #333}#cssmenu ul{list-style:none}#cssmenu > ul > li{float:left}#cssmenu > ul > li.active a{background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmCu_xBguz_D_waDhoERZiuel_1vs3MosQNC_hS4xt5umDw8LY48XiUchK7m2iGCvyq0arL8yg1IOTeFtDyR1twADZg-XCoq-dx4nysJHyr89rIdgw7p-YCcC7FO4I1W2t-Rp5eMS3jJA/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-moz-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-webkit-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;filter:none}#cssmenu > ul > li.active a:hover{background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);filter:none}#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #8a8a8a;-moz-box-shadow:inset 0 0 0 1px #8a8a8a;-webkit-box-shadow:inset 0 0 0 1px #8a8a8a;background:#4a4a4a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmCu_xBguz_D_waDhoERZiuel_1vs3MosQNC_hS4xt5umDw8LY48XiUchK7m2iGCvyq0arL8yg1IOTeFtDyR1twADZg-XCoq-dx4nysJHyr89rIdgw7p-YCcC7FO4I1W2t-Rp5eMS3jJA/s1600/grad_dark.png) repeat-x left top;background:-moz-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#626262),color-stop(100%,#787878));background:-webkit-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-o-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-ms-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:linear-gradient(to bottom,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);border-bottom:1px solid #5d5d5d;border-top:1px solid #5d5d5d;border-right:1px solid #5d5d5d;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul > li a:hover{background:#8a8a8a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmCu_xBguz_D_waDhoERZiuel_1vs3MosQNC_hS4xt5umDw8LY48XiUchK7m2iGCvyq0arL8yg1IOTeFtDyR1twADZg-XCoq-dx4nysJHyr89rIdgw7p-YCcC7FO4I1W2t-Rp5eMS3jJA/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(50%,#4a4a4a),color-stop(51%,#3b3b3b),color-stop(100%,#525252));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);filter:none}#cssmenu > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #5d5d5d}#cssmenu > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;/* IE7 */ *width:100%}#cssmenu .has-sub ul li{text-align:center}#cssmenu .has-sub ul li a{border-top:0 none;border-left:1px solid #5d5d5d;display:block;line-height:120%;padding:9px 5px;text-align:center}</style> <!-- customize your menus Links --> <div id="cssmenu"> <ul> <li class="active"><a href="http://amazingtricksforblogger.blogspot.com/search/label/Menu"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Products</span></a> <ul> <li><a href="#"><span>Lables</span></a></li> <li><a href="http://amazingtricksforblogger.blogspot.com/search/label/Blogger"><span>Blogger</span></a></li> <li class="last"><a href="http://amazingtricksforblogger.blogspot.com/search/label/CSS"><span>CSS</span></a></li> </ul> </li> <li class="has-sub"><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>Site map</span></a> <ul> <li><a href="http://amazingtricksforblogger.blogspot.com/search/label/Menu"><span>Menu</span></a></li> <li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/site-map.html"><span>map</span></a></li> </ul> </li> <li class="last"><a href="http://amazingtricksforblogger.blogspot.com/p/contact-us.html"><span>Contact us</span></a></li> </ul> </div>

Remember to insert your menu items like Home, Products and their links.