help converting a normal nav bar to a drop down nav bar

I hav a simple nav bar that i want to convert into a drop down nav bar, but i am not sure what i have to do to accomplish this. Do i need a certain javascript code or css. thanks

/* navigation menu */
div#navigation {
    height:55px;
    background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
    background:transparent url('images/nav-left.png') no-repeat scroll top left;
    height:55px;
}
div#navigation ul {
    background:transparent url('images/nav-right.png') no-repeat scroll top right;
    list-style:none;
    margin:0; 
    padding:0 10px;
    position:relative;
    top:0;
    height:55px;
    display:block;
}
div#navigation ul li {
    display:block;
    float:left;
}
div#navigation ul li a {
    display:block;
    float:left;
    color:#ffffff;
    border-bottom:none;
    height:32px;
    font-family:"Trebuchet MS", Verdana, Arial;
    font-weight:bold;
    font-size:1.2em;
    padding:14px 20px 9px;
    border-right:1px solid #060D14;
    border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
    border-left:none;
}
div#navigation ul li.navright a {
    border-right:none;
}
div#navigation ul li a:hover {
    color:#FC822开发者_Go百科8;
}


<div id="navigation">
        <div id="innernav">
            <ul>
                <!-- top navigation  -->
                <!-- add class navleft to first item and navright to last item as shown -->
                <li class="navleft"><a href="index.html">home</a></li>
                <li><a href="examples.html">examples</a></li>
                <li><a href="#">solutions</a></li>
                <li><a href="#">our service</a></li>
                <li><a href="#">support</a></li>
                <li class="navright"><a href="#">contact</a></li>
            </ul>
        </div>
    </div>

Here is an example that uses the suckerfish methodology:

http://jsfiddle.net/uCdGc/

Here is the magic CSS:

/* Code for dropdown */
#navigation ul li ul {
    position: absolute;
    left:-999em;
}
#navigation ul li ul li {
    float:none;
    /* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
    left:auto;
    margin-top:55px;
}

For more on suckerfish, check out this url: http://www.htmldog.com/articles/suckerfish/dropdowns/

What I've done is added a ul element containing subnavigation elements to your "Examples" navigation item. When you hover over, the CSS will position the subnavigation so that it appears where you want it. This should work without any javascript, but if you want to support IE 6, you will need to include the jQuery javascript library and the code in the javascript block in the example.

Right now the subnavigation is styled plainly, but add more styles as you need. I've commented where you should add them.

Good luck.