当我导航到子菜单项时，如何让wp_nav_menu保持扩展？

Question

I am a new arrival in the Wordpress community and currently I am working on trying to convert a static HTML site over to the WP platform. I have almost everything in my theme working with one exception: the navigation menu.

I am trying to use the built in navigation functionality, and I am pretty sure I have seen this done on other WP sites, but I'm having a hard time finding help to guide me through this area (I apologize if there is already an ask for this scenario on stackoverflow, I've been searching for a few days now and maybe I'm just using the wrong terminology?).

This is my testing base: http://ahathaway.n120.fiercethought.net/consumer-support/

That link will take you to the only section on the website that is supposed to have a "sub-menu" and what I am trying to accomplish is having the submenu stay expanded if and when the user navigates to any of the sub-menu items (i.e. if you click "Membership Forms" the sub-menu shouldn't disappear as it does currently).

I'm not sure what I'm missing here exactly, and I'm in desperate need of a nudge in the correct direction, so any help at all is and will be much appreciated! Thanks!

Here is my relevant code (please let me know if you need/want to see anything else, I tried to keep this post concise, at least initially):

From header.php:

 <!-- Begin navigation menu -->
      <?php
                                // Top navigation menu
                                wp_nav_menu( array(
                                    'theme_location' => 'top-navigation',                                       
                                    'menu_id' => 'nav',
                                    'menu_class' => 'left',
                            'depth' => 2,
                'walker' => new Walker_Nav_Menu));
  ?>
    <!-- End navigation menu -->

Here is the style.css (since this is a conversion and needs to look as close to identical as possible, much of the CSS has been left intact:

    /* The following is from the reset.css originally housed */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

/* The following CSS came from screen.css from the original website  */


body {background: #3279b3; color: #333; font: 13px/17px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
strong {font-weight: bold;}
p {margin: 10px 0;}
p.small {font-size: 11px; line-height: 14px; color: #666;}
label {font-weight: bold;}
input, textarea {margin: 5px 0 10px 0; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
textarea {width: 500px; height: 100px; font-size: 11px; padding: 5px;}
a {color: #738403; font-weight: bold;}
hr {margin: 20px 5px; border: none; border-bottom: 1px solid #bed6e9; clear: left;}
* + html hr{margin: 10px 5px 0 5px; padding: 0; border: none !important; line-height: 1px; color: #bed6e9;}

#wrapper {width: 100%; margin: 0 auto; background: url(/_assets/bg_body.png) top center repeat-y;}

#cols {width: 930px; margin: 0 auto; background: url(/_assets/bg_cols.png) 0 0 no-repeat; position: relative; overflow: auto; padding: 0 15px 10px 15px;}

#cols img.bnr {float: left; margin-bottom: 18px}

#topbar {height: 50px; width: 708px; position: absolute; top: 0; right: 14px;}
#topbar form {float: right; margin-top: 11px; background: url(/_assets/bg_search.png) 0 0 no-repeat; width: 175px; height: 28px;}
#topbar input {background: none; border: none; margin: 0;}
#topbar input.box {width: 130px; color: #c8e6ff; padding: 6px 0 6px 8px; font: 11px "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; height: auto; line-height: 11px;  vertical-align: top;}
#topbar input.button {
    width: 34px;
    height: 26px;
    font-size: 1px;
    text-indent: -999em;
    cursor: pointer;
}

#weather {float: left; margin-top: 4px; font-size: 12px;}
#weather ul, #weather li {display: inline; line-height: 40px; color: #fff;}
#weather img {float: left; margin-right: 3px;}

#col_lft {width: 215px; float: left; background: url(/_assets/bg_nav.png) bottom center no-repeat;}

#nav {width: 215px;}
#nav li a, menu-item {color: #fff; font-size: 13px; text-decoration: none; height: 35px; line-height: 37px; width: 185px; padding: 0 15px; display: block; border-top: 1px solid #416788; border-bottom: 1px solid #17354e; font-weight: normal;}
#nav li a:hover, #nav li.current_page_item a, #nav li.parent-here a {color: #76d3ff; background: url(/_assets/bg_nav_hover.png) top center no-repeat; border-top: 1px solid #17354e;}
#nav li ul {display: none; margin: 0; padding: 0;}
#nav li ul li a {border: 0 !important;}
#nav li.current_page_item ul, #nav li.parent-here ul {display: inline !important;}
#nav li.current_page_item ul li a, #nav li.parent-here ul li a { color: #fff; font-size: 13px; font-weight: normal; text-transform: none; text-decoration: none; height: auto; line-height: 16px; width: 175px; display: block; padding: 10px 20px 0 20px; background-image: none !important; background-color: #082640 !important;}
#nav li ul li a:hover, #nav li ul li a:active, #nav li.parent-here ul li.current_page_item a { background-image: none !important; color: #259fd2; }
#nav li.last a, #nav li ul li.last a, #nav li ul li.herelast a {padding-bottom: 3px; border-bottom: none !important;}
#nav li ul li.last a {padding-bottom: 12px;}
#nav li.herelast a {background: url(/_assets/bg_nav_hover_bot.png) bottom center no-repeat; border: none !important; padding-top: 1px; padding-bottom: 3px;}
#nav li.last a:hover {background: url(/_assets/bg_nav_hover_bot.png) bottom center no-repeat;}
#nav li.herelast, #nav li.herelast a {color: #259fd2 !important;}
* + html #nav li ul {float: left; margin-left: -16px;}

#col_rht {width: 700px; float: right; margin-top: 65px;}
#col_rht h1 {font-size: 24px; font-weight: bold; color: #d87500; margin: 6px 5px 15px 5px; padding-bottom: 22px; line-height: 24px; border-bottom: 1px solid #88abc7;}
#col_rht h2 {font-size: 15px; line-height: 18px; font-weight: bold; margin: 20px 5px 10px 5px;}
#col_rht h3 {font-weight: bold; margin-top: 20px;}
#col_rht h3, #col_rht p, #col_rht ul, #col_rht ol, #col_rht table, #col_rht blockquote {margin: 10px 5px;}
#col_rht table {width: 690px;}
#col_rht table, td {border: 1px solid #b9d7ef; border-collapse: collapse;}
#col_rht td {padding: 6px 8px; line-height: 15px;}
#col_rht tr.odd {background: #dff1ff}
#col_rht ol li {
    list-style: decimal;
    margin-left: 20px;
    margin-bottom: 5px;
}
#col_rht ul li {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 5px;
}
#col_rht a {
    color: #008ec9;
    font-weight: bold;
}
#col_rht img.flt_lft {float: left; margin: 0px 15px 15px 5px;}
#col_rht img.flt_rht {float: right; margin: 5px 5px 15px 15px;}
#col_rht blockquote {background: #dff1ff; padding: 1px; border-left: 5px solid #82b0d4;}
#col_rht blockquote p {margin: 10px; padding: 0;}

#buckets {width: 700px; overflow: auto; background: url(/_assets/bg_buckets.png) 0 0 repeat-y; font-size: 12px;}
#buckets div.bucket {width: 202px; margin-right: 30px; float: left; padding: 0 5px; overflow:visible}
#buckets div.bucket.last {margin-right: 0; position:inherit}
#buckets h2 {font-size: 18px; font-weight: bold; color: #e07c06; margin: 0 0 12px 0; padding-bottom: 15px; line-height: 20px; border-bottom: 1px solid #bed6e9; line-height: 16px;}
#buckets h3 {font-weight: bold; margin: 10px 0;}
#buckets p {margin: 10px 0 0 0;}
#buckets label {margin-left: 10px;}
#buckets input {width: 195px;}
#buckets input.submit {margin-bottom: 0; width: 60px;}

#footer {width: 100%; height: 50px; margin: 0 auto; background: url(/_assets/bg_footer.png) bottom center no-repeat; padding-bottom: 40px;}
#footer p {margin: 0; padding: 15px 0 0 0; font-size: 11px; color: #666; line-height: 15px; text-align: center;}

Answer 1

there is a class called current_page_item which is responsible for the menu expansion. That class is present in li#menu-item-30 in the link you gave. However, current_page_item is absent and replaced by current_page_parent for the subpages. That's why it's not showing.

Therefore, what I recommend is that in your stylesheet, you duplicate every DOM identifier which uses current_page_item, and put current_page_parent in its place. Here is what I mean:

Before:

#nav li.current_page_item ul li a, #nav li.parent-here ul li a { color: #fff; font-size: 13px; font-weight: normal; text-transform: none; text-decoration: none; height: auto; line-height: 16px; width: 175px; display: block; padding: 10px 20px 0 20px; background-image: none !important; background-color: #082640 !important;}

After:

#nav li.current_page_parent ul li a, #nav li.current_page_item ul li a, #nav li.parent-here ul li a { color: #fff; font-size: 13px; font-weight: normal; text-transform: none; text-decoration: none; height: auto; line-height: 16px; width: 175px; display: block; padding: 10px 20px 0 20px; background-image: none !important; background-color: #082640 !important;}

Do that for every instance of current_page_item you find, and you should be good to go.

By the way, are you using Firebug or the Chrome/Safari Developer Tools? They are invaluable for debugging these types of problems. That's basically all I did. :)