希望将图形添加到活动菜单项

Question

我想在活动菜单项中添加勾号，但似乎无法弄清楚如何使用我当前的代码。这是我想要完成的图形（注意滴答标记向下（居中）：

非常感谢任何帮助。

您可以在以下网址看到当前网站： http://www.redone.org/_dev/ski/menu2.html

Answer 1

其他答案中提供的背景图像解决方案是解决此问题的最常用方法。一个不错的选择也是可用的，因为这个特殊的图形，一个三角形，可以在HTML + CSS中轻松创建;无需图像，画布，SVG / VML或插件。

<div style="
    position:absolute; 
    width:0; 
    right:0; 
    border: 10px solid #fff;
    border-top-color: #000;
    "></div> 

我创建了basic example of a menu using this technique。 CSS中的多边形至少在2001年由Tantek Çelik进行了探索。

Answer 2

关于鼠标悬停元素

current_page_item

更改背景图像..//使用该颜色制作一个图像，如调出

//这就像一个伪代码，这在ie7中不起作用所以你可以使用jquery

li a:hover 

    {
    background-image: url(images/callout.jpg);
    }

Answer 3

您的“当前”菜单项应分配一个额外的类（如“当前”）。然后为“当前”类添加一个css规则，该类在底部显示额外的图形。

Answer 4

感谢您指点我的方向。以下是最终为我工作的内容：

#headerline {
    overflow: visible;
    border-bottom: 1px solid #2c5e93;
    height: 40px;
}

#menu-main-menu li.current_page_item a{
    color: #014783;
    background-color: #89cefa;
}

#menu-main-menu li.current_page_item {
    height: 50px;
    background-image:url(ski_tick.png);
    background-position:center;
    background-repeat:no-repeat;
}