0

I'm trying to keep the parent nav background active when on child page.

Example: Portfolio---->Programs

When my current page is Programs, I'd like to keep the Portfolio active on the navigation bar.

The code use in the CSS is:

/* Navigation
   --------------------------------------------------------------------------------*/
#nav-wrap {
     max-height: 200px;
}
#nav .container ul {
     list-style: none !important;
}

#nav .container ul li {
     list-style: none !important;
}

#nav .container ul span:last-child li,
      #nav .container ul > li:last-child {
      /*background: none;*/
      background:url(surf_40.gif) no-repeat -12px;
}

#nav ul li a {
     display: block;
     font-size:30px;
     line-height: 35px;
     padding: 10px 0;
     color: rgba(255,255,255,0.4);
     padding: 2px 25px 2px 21px;
     border: 0;
     outline: 0;
     list-style-type: none;
     position:relative;
     right:-4px;
     z-index:1;
     text-transform: uppercase;
     font-family: 'Aller', sans-serif;
     }



    #nav ul li#active a {
         background: url(surf_40.gif) no-repeat -12px;
    }

    #nav ul li#active a,
    #nav ul li a:hover {
            color: #fff;
            border: 0;
    }

    /**Text modified added - for active parent while my current page is a sub-menu***/

    #wsite-menus .wsite-menu li #active a #nav ul li a {
              color: #fff;
              border: 0;
    }


    /*---*/


    /* Navigation Submenu's
     --------------------------------------------------------------------------------*/
       #wsite-menus .wsite-menu li a {
            color: rgba(0,0,0,0.4);
            font-weight: bold;
            background: #fff;
            /*border: 0 px;*/
            border: solid thick;
            border-radius: 1em;
            /* fine modifica*/
            position:relative;
            right: 0 px;
          }

          #wsite-menus .wsite-menu li a:hover {
             color: #000;
             background: #e3e3e3;
             border: solid thick orange;
          }

thank you for any help..

HTML code:

<div id="nav">
   <ul class='wsite-menu-default'>
<li id='pg962547086691527768'><a href="/" data-membership-required="0" >Home</a></li>
<li id='pg623326219140352077'><a href="/about.html" data-membership-required="0">About</a</li> 
           </ul></div>
ludovico pinzari
  • 1
  • 2

1 Answers1

0

Put the :hover on li's instead of a:hover and alos add class active to li. if you provide html two then i will provide you the perfect solution thanks

Shaban Khan
  • 156
  • 9