我需要一些 CSS 帮助。我想实现两件事,但到目前为止我还没有成功。 网站链接:http://hn.k12.oh.us/testsite/district/
当我将鼠标悬停在水平菜单(主菜单)元素上时,我希望出现一个三 Angular 形。我已经在垂直菜单中实现了这一点,但无法在水平菜单中显示它。我希望它类似于垂直菜单的情况。
我正在使用以下代码。
#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;
}
我希望三 Angular 形显示在当前事件的菜单项上。我无法使它适用于水平或垂直菜单。
我已经用下面的 css 尝试了上面的内容:
#primary-menu > ul > li.active a {
最佳答案
#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 { ...
您错误地指定了父/子关系。
关于CSS 菜单三 Angular 形不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15118846/