Tweet
In my previous post, I had shown a simple drop down menu. This code is for a 2-level horizontal dropdown menu. Follow the steps to implement it on your blog.
Paste this code in the head section of your template before </head>
/* ---------------------2 - level Menu Horizontal Dropdown ----------------------------------*/
<!--
#toppic {width:970px;height:37px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwyZ8HZwEn3VBM8huCecXqDbtPaXUznkbz3CRrrikhKFP_Kby_uDSAZCZRuWVJnPaWSZkFplbgvWDRFPNr0lx8aMrRcILnJVe_86UJDXWxeMXkgrnO9oJJR5XyL_7qdSIdwWp_jCLHjhB/s1600/menutop.gif) repeat-x top;border-bottom:1px solid #002851;margin:0 auto;padding:0 auto;overflow:hidden;text-shadow:1px 1px 2px #002851}
#topwrapper {width:970px;height:37px;margin:0 auto;padding:0 auto}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {text-align:left;display: block;text-decoration: none;padding:10px 12px 11px;font:bold 14px Arial;text-transform:none;color:#eee;}
#top a:hover {color:#c5fa6f}
#top a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nPmknosR32bVMYOGCsbk9SJfS-QZkDgtmHvC6ukR31PmtisXOrQXisqiyNhrHsd8E55kuTQUVa1zsq1O4Lffk7F-BLpZxbHgrQji7GzSvntZ9lLNyETn1MVTZzyglgvFxsLZ0qEzvGg/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 10px 24px 11px 12px;background-position: right center;}
#top li {float: left;position: relative;}
#top li {position: static; width: auto;}
#top li ul, #top ul li {width:300px;}
#top ul li a {text-align:left;padding: 6px 15px;font-size:13px;font-weight:normal;text-transform:none;font-family:Arial, sans-serif;border:none;}
#top li ul {z-index:100;position: absolute;display: none;background-color:#1a3352;margin-left:-80px;padding:10px 0;-moz-border-radius-bottomleft:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-bottom-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;-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 ul li {width:150px;float:left;margin:0;padding:0}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {color:#ddd;background-color:transparent;text-decoration:none;}
#top ul a:hover {text-decoration:underline!important;color:yellow}
-->
</style>
<div id='topwrapper'>
<ul id='top'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='trigger' href='#'>Drop menu 1</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 2</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
<li><a href='/'>Sub menu 5</a></li>
<li><a href='/'>Sub menu 6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Drop menu 3</a>
<ul>
<li><a href='/'>Sub menu 1</a></li>
<li><a href='/'>Sub menu 2</a></li>
<li><a href='/'>Sub menu 3</a></li>
<li><a href='/'>Sub menu 4</a></li>
<li><a href='/'>Sub menu 5</a></li>
<li><a href='/'>Sub menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>
</div>
Horizontal dropdown navigation menus gives blog readers the convenience of easy blog navigation. If you don't have a navigation bar, then you can use the code given below to create one for your blog.
<style type="text/css">
/* ----------------- End of menu -----------------------*/
The above code is the design of your drop down menu. Now for the display on your blog, you have to add the following code after the header wrapper portion in the <body> section.
<div id='toppic'>
In this code, change the links and the names according to your needs. You can also experiment with the 1st code by changing the color and font that suits with your blog display.
You can also download the demo html file from here and run it on a web browser before implementing it on your blog.
