Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Vertical CSS menu not displaying child items

Discussion in 'Website Design Forum:' started by pjohnstone, Mar 9, 2011.

  1. pjohnstone

    pjohnstone Member

    Hi all,

    I am a bit stumped on this one. I am building a site in Wordpress and I have my primary navigation at the top which works fine.

    I also have a left sided navigation bar on selected areas of the site. Within these menus there are a number of parent - child menu strutures.

    The problem I have is that when I click on the parent item the child items appear, but once the page is loaded they then vanish. I can solve it by make the parent page and anchor # and it works, but I need to put information on these parent pages.

    So ideally what I want is that when you are on either the parent or child pages then the menu structure stays like this:

    Our Services
    Oncology
    Emergency

    etc and does not fold back in.

    Here is a link:

    Our Services | Vets Now Referrals

    Here is the CSS for this menu:

    ul {
    margin: 0;
    padding: 0;
    list-style: none
    }

    ul li {
    position: relative;
    }
    /* keep folowing styles together..........................*/
    * html ul ul {
    margin-left:-16px;/* ie5 fix */
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    * html ul li {float:left;/* hide float from ie5*/}
    * html ul ul {
    width:150px;
    w\idth:220px;
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    * html ul ul {margin-left:0;/* hide margin from ie5*/}


    /* keep above styles together .............*/

    #side-nav{
    background-color: #D81939;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    #side-nav li ul {
    position: relative;
    display:none;
    }
    #side-nav li ul li {
    width:220px
    }

    /* Styles for Menu Items */
    #side-nav ul li a {
    display:block;
    text-decoration: none;
    color: #FFF; /* IE6 Bug */
    line-height:4em;
    height:4em;
    padding:0 5px;
    font-size: 13px;
    background-image: url(images/left-menu-line.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    }
    #side-nav li li a {
    background-color: #7A0E21;
    background-image: url(images/left-menu-line-SUB.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    }

    /* set dropdown to default */
    #side-nav li:hover li a, #side-nav li.over li a {
    color: #FFF;
    background-color: #7A0E21;
    }

    /* this sets all hovered lists to red */
    #side-nav li a:hover,
    #side-nav li:hover a, #nav li.over a,
    #side-nav li:hover li a:hover, li.over li a:hover {
    color: #000;
    }

    #side-nav li ul li { } /* Sub Menu Styles */
    #side-nav li.on ul { display:block } /* The magic */
    #side-nav li.off ul{display:none}


    Also here is where it is called in the wordpress template


    <div id="vet-navigation-area">
    <div id="side-nav">

    <?php
    wp_nav_menu(array(
    'theme_location' => 'glasgow-vets',
    'menu_id' => 'nav',
    'child_of' => '$PARENT'
    ));
    ?>


    </div>
    </div>


    Any help would be fantastic.

    Thanks
     

Share This Page