Horizontal Pull Dropt Down Menu

CSS Code:

.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #804040;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: #804040;
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: #804040;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: #804040;}
.pd_menu_01 ul li:hover a {background-color:#CCBFC5; text-decoration:none; color:#804040;} /*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:#ABA9BA; color:#804040;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#FF8040; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #804040;}
.pd_menu_01 ul li a:hover {background-color:#CCBFC5; text-decoration:none;color:#804040;} /*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:#ABA9BA; color:#804040;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#FF8040; text-decoration:none;color:#FFFFFF;} /*Color subcells hovering mode*/

HTML Code:

<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="http://protonicatv.blogspot.com">1 menu 1<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]1.1</a></li>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]1.2</a></li>
<li><a href="http://protonicatv.blogspot.com"  class="lastone">[new sub-menu item]1.3</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="http://protonicatv.blogspot.com">2menu 2<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]2.1</a></li>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]2.2</a></li>
<li><a href="http://protonicatv.blogspot.com"  class="lastone">[new sub-menu item]2.3</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="http://protonicatv.blogspot.com">3 menu 3<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]3.1</a></li>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]3.2</a></li>
<li><a href="http://protonicatv.blogspot.com"  class="lastone">[new sub-menu item]3.3</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="http://protonicatv.blogspot.com">4 menu 4<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]1</a></li>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]2</a></li>
<li><a href="http://protonicatv.blogspot.com"  class="lastone">[new sub-menu item]3</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="http://protonicatv.blogspot.com">5 menu 5<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<ul>
<li><a href="http://protonicatv.blogspot.com"  >[new sub-menu item]5.1</a></li>
<li><a href="http://protonicatv.blogspot.com"  class="lastone">[new sub-menu item]5.2</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
<ul><li><a href="http://www.facebook.com">Profile<!--[if IE 7]><!--></a><!--<![endif]--><!--[if IE]><table><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]--></li></ul>
</div>

Bantuan : Cara Memasang Menu Di Blogger Template