导航 - a上的图像：悬停和a：已选中

Question

我正在尝试在我的导航菜单中悬停的项目后面添加一个“文件夹”（不知道该叫什么），并且还会在所选页面上停留。 你可以在这里看到图像：

但是因为这是一个单一尺寸的图像，所以对于我的一些项目来说，这是很大的。

如何以最佳方式完成这项工作？我应该使用som jQuery还是坚持使用CSS？

你可以看到我到目前为止所做的事情：“在找到解决方案后删除了我的链接”

希望你能给我一些有用的答案。 ：）

Answer 1

一句话滑门效果

旧但很好的原始技术

http://alistapart.com/article/slidingdoors

Answer 2

• 更改background-image以仅反映橙色渐变（顶角处没有曲线）。

• 将CSS border-radius用于底部的圆角。

• 将顶角曲线切割为单独的图像，并使用CSS“:before和:after将图像相应地放置在左右角落。

类似的东西：

#nav a:hover
    {
    background-image: url('orange_gradient.png'); /* could be 1px wide */
    background-repeat: repeat;
    border-radius: 0 0 10px 10px;
    }

#nav a:hover:before
    {
    content: url('curve.png');
    display: inline-block;
    position: absolute;
    left: 0;
    margin-top: -50px;
    }

#nav a:hover:after
    {
    content: url('curve.png');
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: -50px;
    }