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菜单三角不工作

回答

相关问题