How to add a horizontal chrome drop down navigation menu with Javascript to Blogger

JavaScript Code Snippet This section code should be inserted before the closing head tag.

<span id="preserve6a23c32d91c744ff994296ebb69fddb0" class="wlWriterPreserve"><script src='http://blogspotvision.info/scripts/chromemenu/chromejs/chrome.js' type='text/javascript'/>


CSS Code Snippet This section code should be inserted before the closing head tag.

<style type='text/css'> .chromestyle{ width: 99%; font-weight: bold; } .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 1px solid #BBB; width: 100%; background: url(http://blogspotvision.info/scripts/chromemenu/chrometheme/chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/ padding: 4px 0; margin: 0; text-align: center; /*set value to "left", "center", or "right"*/ } .chromestyle ul li{ display: inline; } .chromestyle ul li a{ color: #494949; padding: 4px 7px; margin: 0; text-decoration: none; border-right: 1px solid #DADADA; } .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/ background: url(http://blogspotvision.info/scripts/chromemenu/chrometheme/chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/ } /* ######### Style for Drop Down Menu ######### */ .dropmenudiv{ position:absolute; top: 0; border: 1px solid #BBB; /*THEME CHANGE HERE*/ border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; } .dropmenudiv a{ width: auto; display: block; text-indent: 3px; border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/ padding: 2px 0; text-decoration: none; font-weight: bold; color: black; } * html .dropmenudiv a{ /*IE only hack*/ width: 100%; } .dropmenudiv a:hover{ /*THEME CHANGE HERE*/ background-color: #F0F0F0; } </style>


HTML Code Snippet This section code should be inserted where you want the output to appear.

<!--webbot bot="HTMLMarkup" startspan --><div class="chromestyle" id="chromemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="#" rel="dropmenu1">Resources</a></li> <li><a href="#" rel="dropmenu2">News</a></li> <li><a href="#" rel="dropmenu3">Search</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> <!--2nd drop down menu --> <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com">MSNBC</a> <a href="http://news.bbc.co.uk">BBC News</a> </div> <!--3rd drop down menu --> <div id="dropmenu3" class="dropmenudiv" style="width: 150px;"> <a href="http://www.google.com/">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">MSN</a> </div><!--webbot bot="HTMLMarkup" endspan i-checksum="47856" --> <script type="text/javascript"> cssdropdown.startchrome("chromemenu", "chromemenu2", "chromemenu3", "chromemenu4") </script></span> <!--webbot bot="HTMLMarkup" endspan i-checksum="35102" -->