0

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

示例：作品集---->项目

当我的当前页面是程序时，我想在导航栏上保持投资组合处于活动状态。

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

1 回答 1

0

将 :hover 放在 li 上，而不是 a:hover 和 alos add class active 到 li。如果您提供 html 两个，那么我将为您提供完美的解决方案，谢谢

于 2015-01-09T07:52:41.667 回答