Create Simple CSS "Drop Down Menu"

Step 1. Log in to your blogger dashboard.
Step 2. Select your blog.
Step 3. Select Template option and click on Edit HTML option.
Step 4. In the template code find ]]></skin>
Step 5. Just above it paste following code and save the template.

/*----- Drop Down Menu ----*/ #rbnavbar { background: #2a2626; width: 100%; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #7f7777; height:35px; } #rbnav { margin: 0; padding: 0; } #rbnav ul { float: left; list-style: none; margin: 0; padding: 0; } #rbnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #rbnav li a, #rbnav li a:link, #rbnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #rbnav li a:hover, #rbnav li a:active { background: #6c6464; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #rbnav li { float: left; padding: 0; } #rbnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #rbnav li ul a { width: 140px; } #rbnav li ul ul { margin: -25px 0 0 161px; } #rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul { left: -999em; } #rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul { left: auto; } #rbnav li:hover, #rbnav li.sfhover { position: static; } #rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited { background: #6c6464; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #rbnav li li a:hover, #rbnavli li a:active { background: #2a2626; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }




Step 6.  Layout → Add A Gadget → HTML/Java Script and paste next code

<div id='rbnavbar'> <ul id='rbnav'><li> <a href='#'>Home</a> </li><li> <a href='#'>Contact</a> </li><li> <a href='#'>About</a> </li><li> <a href='#'>Blogging</a> </li><li> <a href='#'>Services</a> <ul><li><a href='#'>Sub Page #1</a></li><li><a href='#'>Sub Page #2</a></li><li><a href='#'>Sub Page #3</a></li><li><a href='#'>Sub Page #4</a></li><li><a href='#'>Sub Page #5</a></li></ul></li><li> <a href='#'>Create This ></a> </li></ul></div>


Step 7. replace # with your  links and other with your Page Title.