Tweet
<!--
#topwrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmdSz8jRnfmuN9Wc52OTUcOkUZ5PvYtkao3g6OVgZDC55xMxpURg_4oUnYqxUsfFJbxXrFyEfGBglqcU6VFxHgYxk-zsnvSxZsHMZyIWWIxqBdLAnbGG9NcPEYVlyG9Srmtxcb77lX5hPH/s1600/navbar.png) repeat-x top;width:940px;margin:0 auto;padding:0 auto}
#topnav{width:940px;height:25px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Trebuchet MS;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#01bfe1;border-right:1px solid #008198;border-left:1px solid #003a52;padding:3px 12px 6px}
#top a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_gO2QfKJIu85Z9GOQqRrxNoo99xTDJcQYK0TOA-Hj_PR8kvF2OxqmAFHFTSpIfSH83G620SupJ8_ZE4fl2HK2zWVsnLP75mks6v0YvuZCMmE59J9N0mrDyMLTRZJp1uz-8tdZVGIGmqx7/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:3px 24px 6px 12px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#000;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#004764;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=87);-moz-opacity:.87;opacity:.87}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#004764;color:#000}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#01bfe1;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #00709e;border-top:1px solid #00151e;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#006a95!important;color:#000!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Trebuchet MS;color:#e8e8e8;display:block;line-height:16px;text-transform:uppercase}
#top li:hover a span,#top li:hover a.arrow span{color:#01bfe1}
-->
</style>
<div id='topnav'>
<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'><span>Sports</span>Be Healthy</a></li>
<li><a href='#'><span>Culture</span>Human Act</a></li>
<li><a class='arrow' href='#'><span>Entertainment</span>Enjoy your life</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'><span>Health</span>Take a trip</a></li>
<li><a href='#'><span>Economics</span>Human Needs</a></li>
<li><a href='http://www.source-codes.co.in'><span>Sample Page</span>Static Page</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
This horizontal dropdown uses the <span> attribute to display an additional term in the menu. The <span> is used to group content so scripting or style rules can be applied to enclosed content. As it has no preset or rendering meaning, this is the most useful inline element for associating style and script with content.
Paste this code in the head section of your template before </head>
/* ------------------------Menu Start -----------------------*/
<style type="text/css">
/* -------------------------Menu End --------------------------------*/
Then paste this piece of html code in the <body> section after the header wrapper portion.
<div id='topwrapper'>
You can also download the demo html file from here to run it on your browser before implementing it on your blog.
Now save the template to see the changes. Leave a comment if you have any difficulty.
