Vertical Sidebar Menu Parent and Child not displaying correctly [closed]

I am developing a WordPress site and trying to display my menu correctly. How can I display all Parent items but only show the Child items when it’s Parent has been selected. I hope that makes sense. Below is what I’m trying to achieve:

(image not available anymore)

And below is basically how it currently looks right now:

(image not available anymore)

Here is my CSS code:

/*** Single Level ***/
#widget_nav_menu, #widget_nav_menu ul {
    clear: both;
    float: left;
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;

}
    #widget_nav_menu a {
        display: block;
        font-family: Arial, sans-serif;
        font-size: 13px;
        color: #174267;
        text-decoration: none;
        padding: 7px 0px 7px 7px;
    }
    #widget_nav_menu a:current,
    #widget_nav_menu a:hover {
        width: 213px;
        background-image: url(images/hover_bg.png);
        background-position: right -5px;
        position: absolute;
        z-index: 1005;
        color: #fff;
        margin-right: -17px;
    }
    #widget_nav_menu li.current_page_item a {
        width: 213px;
        background-image: url(images/hover_bg.png);
        background-position: right -5px;
        color: #fff;
        margin-right: -17px;
    }
    #widget_nav_menu li {
        float: left;
        background: #f4f8fa;
        width: 202px;
        border-bottom: 1px solid #c3ced5;
        height: 34px;
        text-indent: none;
        color: #174267;
    }

        #widget_nav_menu li ul {
            position: absolute;
            width: 213px;
            left: -999em;
        }
        #widget_nav_menu li:hover ul {
            left: auto;
        }

        #widget_nav_menu li:hover ul, #widget_nav_menu li.sfhover ul {
            left: auto;
        }

            /*** Multi Level ***/
            #widget_nav_menu li ul ul {
                margin: -1em 0 0 10em;
            }

            #widget_nav_menu li:hover ul ul, #widget_nav_menu li.sfhover ul ul {
                left: -999em;
            }

        #widget_nav_menu li ul li.current_page_item a:hover {
            width: 213px;
            background-image: url(images/hover_bg.png);
            background-position: right -5px;
            color: #fff;
            margin-right: -17px;
        }

I’m not sure if I need to use the a:first-child and a:last-child pseudo selectors and etc. Can anyone shed some light on this please? I’m sort of half way there I think, just need to get the Child items sitting in between the Parent items, instead of the drop down overlay…

Add this to your function.php file:

function hierarchical_submenu_get_children($post, $current_page) {
$menu = null;
// Get all immediate children of this page
$children = get_pages('child_of=" . $post->ID . "&parent=" . $post->ID . "&sort_column=menu_order&sort_order=ASC');
if ($children) {
    $menu = "\n<ul>\n";
    foreach ($children as $child) {
        // If the child is the viewed page or one of its ancestors, highlight it
        if (in_array($child->ID, get_post_ancestors($current_page)) || ($child->ID == $current_page->ID)) {
            $menu .= '<li class="sub-menu"><a href="' . get_permalink($child) . '" class="sub-menu current-item">' . $child->post_title . '</a>';
        } else {
            $menu .= '<li><a href="' . get_permalink($child) . '">' . $child->post_title . '</a>';
        }
        // If the page has children and is the viewed page or one of its ancestors, get its children
        if (get_children($child->ID) && (in_array($child->ID, get_post_ancestors($current_page)) || ($child->ID == $current_page->ID))) {
            $menu .= hierarchical_submenu_get_children($child, $current_page);
        }
        $menu .= "</li>\n";
    }
    $menu .= "</ul>\n";
}
return $menu;

}

Call in your sidebar like so:

<?php echo hierarchical_submenu($post); ?>