Create Drop Down Menu

At this opportunity, I will try to present a tutorial how to make simple drop down menus with CSS.
Jump on the tutorial
1. After sig in on blogger account>>> on the dashboard>>> click Layout> Edit HTML
2. Add the following CSS code on the tag ]]></ b: skin>:

#pad {height:100px;}
#menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }
#menuHolder {position:relative; float:left; left:50%;}
#menu,
#menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px; top:-9999px;}
#menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}
#menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}
#menu li:hover {position:relative; z-index:100;}
#menu a:hover {position:relative; z-index:100; color:#fc0;}
#menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}
#menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}
#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul li:hover > a {color:#fc0;}
#menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}
#menu :hover ul :hover ul {left:117px; top:0; padding:0;}
#menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
#menu :hover ul :hover ul li a:hover {color:#fff;}

3. Add the following HTML code below or above <div id='header-wrapper'> or friend can also add in part as a widget page elements

    <div id="menuPositioner">
    <div id="menuHolder">
    <ul id="menu">
        <li> <a href="index.html"> <b> Home </ b> </ a> </ li>
        <li> <a href="single.html"> <b> Single Level </ b> </ a> </ li>
        <li class="current"> <a class="sub" href="dropdown.html"> <b> Dropdown </ b ><!--[ if IE 7 ]><!--></ a GTE ><!--<![ endif] ->
        <!--[ If LTE IE 6]> <table> <tr> <td> <! [Endif] ->
            <ul class="sub1">
                <li> <a class="fly" href="#url"> GTE Dropdown one <!--[ if IE 7 ]><!--></ a ><!--<![ endif] - >
                <!--[ If LTE IE 6]> <table> <tr> <td> <! [Endif] ->
                    <ul class="fly1">
                        <li> <a href="#url"> Dropdown 1.1 </ a> </ li>
                        <li> <a href="#url"> Dropdown 1.2 </ a> </ li>
                        <li> <a href="#url"> Dropdown 1.3 </ a> </ li>
                        <li> <a href="#url"> Dropdown 1.4 </ a> </ li>
                        <li> <a href="#url"> Dropdown 1.5 </ a> </ li>
                        <li> <a href="#url"> Dropdown 1.6 </ a> </ li>
                    </ Ul>
                <!--[ If LTE IE 6]> </ td> </ tr> </ table> </ a> <! [Endif] ->
                </ Li>
                <li class="currentsub"> <a class="fly" href="#url"> Dropdown two GTE <!--[ if IE 7 ]><!--></ a ><!--<! [endif] ->
                <!--[ If LTE IE 6]> <table> <tr> <td> <! [Endif] ->
                    <ul class="fly2">
                        <li> <a href="#url"> Dropdown 2.1 </ a> </ li>
                        <li> <a href="#url"> Dropdown 2.2 </ a> </ li>
                        <li class="currentfly"> <a href="#url"> Dropdown 2.3 </ a> </ li>
                        <li> <a href="#url"> Dropdown 2.4 </ a> </ li>
                        <li> <a href="#url"> Dropdown 2.5 </ a> </ li>
                    </ Ul>
                <!--[ If LTE IE 6]> </ td> </ tr> </ table> </ a> <! [Endif] ->
                </ Li>
                <li> <a href="#url"> Dropdown three </ a> </ li>
                <li> <a href="#url"> Dropdown four </ a> </ li>
                <li> <a class="fly" href="#url"> Dropdown GTE five <!--[ if IE 7 ]><!--></ a ><!--<![ endif] - >
                <!--[ If LTE IE 6]> <table> <tr> <td> <! [Endif] ->
                    <ul class="fly3">
                        <li> <a href="#url"> Dropdown 5.1 </ a> </ li>
                        <li> <a href="#url"> Dropdown 2.2 </ a> </ li>
                        <li> <a href=http://amatullah83.blogspot.com> Dropdown 3.3 </ a> </ li>
                    </ Ul>
                <!--[ If LTE IE 6]> </ td> </ tr> </ table> </ a> <! [Endif] ->
                </ Li>
            </ Ul>
        <!--[ If LTE IE 6]> </ td> </ tr> </ table> </ a> <! [Endif] ->
        </ Li>
        <li> <a class="sub" href="dropline.html"> <b> Dropline </ b ><!--[ if IE 7 ]><!--></ a GTE ><!-- <! [endif] ->
        <!--[ If LTE IE 6]> <table> <tr> <td> <! [Endif] ->
            <ul class="sub2">
                <li> <a href=http://amatullah83.blogspot.com> Dropline one </ a> </ li>
                <li> <a href="#url"> Dropline two </ a> </ li>
                <li> <a href="#url"> Dropline three </ a> </ li>
                <li> <a href="#url"> Dropline four </ a> </ li>
                <li> <a href="#url"> Dropline five </ a> </ li>
                <li> <a href="#url"> Dropline six </ a> </ li>
            </ Ul>
        <!--[ If LTE IE 6]> </ td> </ tr> </ table> </ a> <! [Endif] ->
        </ Li>
        <li> <a class="sub" href="flyout.html"> <b> flyout </ b ><!--[ if IE 7 ]><!--></ a GTE ><!-- <! [endif] ->
        <!--[ If LTE IE 6]> <table> <tr> <td> <! [Endif] ->
            <ul class="sub3">
                <li> <a href="#url"> flyout one </ a> </ li>
                <li> <a href="#url"> flyout two </ a> </ li>
                <li> <a href="#url"> flyout three </ a> </ li>
                <li> <a href="#url"> flyout four </ a> </ li>
            </ Ul>
        <!--[ If LTE IE 6]> </ td> </ tr> </ table> </ a> <! [Endif] ->
        </ Li>
        <li id="support"> <a href="support.html"> <b> Support </ b> </ a> </ li>
        <li id="contact"> <a href="contact.html"> <b> Contact </ b> </ a> </ li>
    </ Ul>
    </ Div>
    </ Div>
4. Save the template. Results of the tutorial to make simple drop down menu with CSS is like screnshot above.
good luck!
source: http://amatullah83.blogspot.com/2010/04/membuat-simple-drop-down-menu-dengan.html