html - 在子页面上保持父导航背景处于事件状态 - CSS Weebly

Question

我试图在子页面上保持父导航背景处于事件状态。

示例:投资组合---->程序

当我的当前页面是 Programs 时，我想让导航栏上的 Portfolio 保持事件状态。

CSS 中使用的代码是:

/* 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代码:

<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>

Answer 1

将 :hover 放在 li 上而不是 a:hover 并且还向 li 添加 class active。如果您提供 html 2，那么我将为您提供完美的解决方案，谢谢