How to create a drop down menu on my custom made theme?

Ok, so I have a custom made theme for my WordPress site and use a custom menu in the header. But when I add a sub-category to my custom header menu, the sub-category shows up just as the “main” categories. So I can easily see that my custom made theme doesn’t support drop down menus by default.

So I was wondering on if there are any PHP & CSS pros’ here who could help me out and create a custom menu.

The theme that has been used to create the custom theme is the TwentyTen theme.

main-menu is the name of the custom header menu by the way.

Here’s the header menu code found in functions.php :

// This theme uses wp_nav_menu() in one location.
    register_nav_menus( array(
        'primary' => __( 'Primary Navigation', 'twentyten' ),
    ) );

function twentyten_page_menu_args( $args ) {
    $args['show_home'] = true;
    return $args;
}
add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

// footer, located at the top of the sidebar.
    register_sidebar( array(
        'name' => __( 'main-menu', 'twentyten' ),
        'id' => 'main-menu',
        'description' => __( 'main-menu', 'twentyten' ),
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
    // footer, located at the top of the sidebar.
    register_sidebar( array(
        'name' => __( 'sidebar-menu', 'twentyten' ),
        'id' => 'sidebar-menu',
        'description' => __( 'sidebar-menu', 'twentyten' ),
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
        // footer, located at the top of the sidebar.
    register_sidebar( array(
        'name' => __( 'footer-menu', 'twentyten' ),
        'id' => 'footer-menu',
        'description' => __( 'footer-menu', 'twentyten' ),
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

Here’s the header menu code found in header.php :

<div id="main-menu">
                <?php
                    if (is_active_sidebar( 'main-menu' ) ) :
                    dynamic_sidebar( 'main-menu' );
                    endif;
                ?>
            </div>

And here’s the header menu’s CSS code:

#main-menu{
    border-bottom:1px solid #CCCCCC;
    border-top:1px solid #CCCCCC;
    padding:10px 0;
    text-align:center;
    float:left;
    width:970px;
}
#main-menu li {
    list-style:none;
}

#main-menu ul{
    float:left;
    padding:0px;
}
#main-menu ul li{
    display:inline;
    margin:0 16px;
}
#main-menu ul li a{
    color:#606060;
    font-family:Verdana;
    font-size:12px;
    font-weight:bold;
}
#main-menu ul .current-menu-item a{
    color:#225783;

}
#main-menu ul li a:hover{
    color:#225783;
}