Installing the result code of CSS Menu Generator in Blogger

Here is link to make css menu with drope down First you have to download it and install and make new one. Then follow the down step.
http://wonderwebware.com/css-menu/download.html

1. Please sign in to blogger with your ID.
2. Click Layout.
3. Click Edit HTML tab.
4. Click Download full template, please make a backup first (important)
5. Copy your CSS tab menu code exactly above the code ]]></b:skin>. Example:

.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
6. Click Save Template button
7. Wait for a while until your template completely saved.
8. Click Page Element tab.
9. Click Add a Gadget at element below the header (you have to make it)
10. Click link HTML/JavaScript.

11. Copy HTML code of your CSS tab menu, then paste on the column that appears. Example:

<div class=”pd_menu_01 “>
<ul><li><a href=”/”>Home<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
<ul><li><a href=”">Blogspot Tutorial<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<ul>
<li><a href=”" >backing up template</a></li>
<li><a href=”" class=”lastone”>backing up widget</a></li>
</ul>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
<ul><li><a href=”">Blogger template<!–[if IE 7]><!–></a><!–<![endif]–><!–[if IE]><table><tr><td><![endif]–>
<!–[if IE]></td></tr></table></a><![endif]–></li></ul>
</div>