CSS菜單三角不工作

我需要一些CSS幫助。我想要實現兩件事情，但迄今爲止我還沒有成功。鏈接站點：http://hn.k12.oh.us/testsite/district/CSS菜單三角不工作

當我將鼠標懸停在水平菜單（主菜單）項目上時，我想要一個三角形出現。我已經在垂直菜單中實現了這一點，但無法在水平菜單中顯示它。我希望它與垂直菜單上發生的事情類似。

我正在使用以下代碼。

#primary-menu > ul > li:hover:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #f7df2b; 
    margin-left: -10px; 
}

我希望三角形顯示在當前活動的菜單項上。我無法讓它適用於水平或垂直菜單。

我已經試過什麼用下面的CSS是上面：

#primary-menu > ul > li.active a {

來源

2013-02-27 user2116516

#primary-menu > ul > li:hover:after {

應該

#primary-menu ul > li:hover:after, 
#primary-menu ul > li.current_page_item:after { ...

或

#primary-menu-menu > ul > li:hover:after, 
#primary-menu-menu > ul > li.current_page_item:after { ...

您已經指定了錯誤的父/子關係。

來源

2013-02-27 18:04:28 isherwood

謝謝！我試圖弄清楚爲什麼你的回覆從來沒有出現在我的電子郵件收件箱中。 – user2116516 2013-03-05 03:24:38

如何讓三角形出現在活動鏈接中？ – user2116516 2013-03-05 03:25:27

答案已更新，但它給我帶來一些麻煩。 http://jsfiddle.net/prQEd/ – isherwood 2013-03-05 04:06:16

CSS菜單三角不工作

回答

相關問題