如何更改活躍的子菜單的背景在我weebly（CSS）代碼

我有一個問題...有在CSS沒有EXP所以我只是想弄清楚這一點，但我不能......如何更改活躍的子菜單的背景在我weebly（CSS）代碼

在我做的Weebly網站我想子菜單有一個「活躍」的背景下，我知道該怎麼做，但它不工作，我不知道爲什麼不？我也想在菜單上也保持活躍過（但仍然可點擊），即使在它的子菜單處於活動狀態。

https://postimg.org/image/6s8phmliv/這裏是我的意思的圖像，當我將鼠標懸停它，我得到了我想要得到的顏色。我需要一個背景色（＃657a8f）和字體顏色（＃97da6f），用於當它處於活動狀態也不會爲它恢復正常（顏色：＃b9b9b9;背景：＃657a8f;）當我不要過度它懸停。同樣，我無法弄清楚如何保持「SHOWREEL」還強調，彷彿活躍（它具有相同的活性顏色的徘徊，在子菜單

這裏是我的代碼：

/* Nav */ 
.nav { 
    text-align: center; 
    background: #4c5a67; 

} 
.nav ul { 
    display: inline-block; 
    vertical-align: top; 
    list-style-type: none; 

} 
.nav ul li { 
    position: relative; 
    display: inline-block; 
} 
.nav ul li a { 
    display: block; 
    padding: 1em; 
    color: #b9b9b9; 
    text-transform: uppercase; 
    letter-spacing: .07em; 
    font-family: 'Quattrocento Sans', sans-serif; 
    font-size: 22px; 
    font-weight: 400; 
    line-height: 19px; 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    transition: all 300ms linear; 
} 
.nav ul li#active > a.wsite-menu-item, 
.nav ul li > a.wsite-menu-item:hover { 
    color: #97da6f; 
    background: #657a8f; 
} 
.mobile-nav { 
    display: none; 
} 
/* Submenu */ 
#wsite-menus .wsite-menu { 
    border-top: 1px solid #b9b9b9; 
    width: 170px; 
} 
#wsite-menus .wsite-menu li a { 
    color: #b9b9b9; 
    background: #657a8f; 
    border: none; 
    text-transform: Capitalize; 
    letter-spacing: .07em; 
} 
#wsite-menus .wsite-menu li:last-child a { 
    background: #4c5a67; 
    border-bottom: none; 
    width: 160px; 
    border-top: 1px solid #b9b9b9; 
    border-bottom: 1px solid #b9b9b9; 
    font-size: 17px; 
} 
#wsite-menus .wsite-menu li:first-child a { 
    background: #4c5a67; 
    border-bottom: none; 
    width: 160px; 
    font-size: 17px; 
} 
.nav ul li#active > a.wsite-menu-item{ 
    color: #97da6f; 
    background: #657a8f; 
} 
.nav ul li > a.wsite-menu-item:hover, 
#wsite-menus .wsite-menu li a:hover { 
    background: #657a8f; 
    color: #97da72; 
} 
#wsite-menus .wsite-menu li a:hover .wsite-menu-arrow:before { 
    background: #657a8f; 
    color: #97da72; 
} 
#wsite-menus .wsite-menu-arrow { 
    background: #657a8f; 
    color: #97da72; 
    font-size: 0; 
} 
#wsite-menus .wsite-menu-arrow:before { 
    background: #657a8f; 
    display: block; 
    color: #97da72; 
    content: '\203A'; 
    font-family: 'Quattrocento Sans', sans-serif; 
    font-size: 24px; 
    font-weight: normal; 
    line-height: 11px; 
}[enter image description here][1]

感謝這麼多的幫助！我真的不知道多少，我剛落，在不同的代碼的東西，看看它是否更新了正確的事情，所以我不知道..可能也做了一個爛攤子呢？

來源

2016-07-24 Dor

這是一個純粹的猜測，因爲如果沒有完整的代碼就很難測試：

加入CSS：

.nav ul li > a.wsite-menu-item:active,, .nav ul li > a.wsite-menu-item:focus { 
    background: orange; 
}

來源

2016-07-24 15:19:14 Toby

對於主導航菜單，（文本），可以使用：

.nav ul li#active a { 
    color: #97da6f; 
}

對於主導航的背景，你可以使用：

.nav ul li#active { 
    background: #657a8f; 
}

此，因爲Weebly添加ID = 「有效」到主NAV。

〜

的下拉式選單（子NAV），而另一方面，Weebly不適合做這個。因此，您需要將其作爲功能請求提交給他們的社區頁面。

來源

2016-07-26 00:22:13

如何更改活躍的子菜單的背景在我weebly（CSS）代碼

回答

相關問題