css - 背景上方的菜单图片

Question

我想在我的菜单背景上方放置一张图片。

我已经尝试过 list-style-image 和背景图片(在 li 和 a 标签上)。我该怎么做呢？菜单图片:image from menu

橙色背景:这是菜单的背景(a 标签)

灰色框:这是我想要在菜单背景上方显示的图像。 (“A”是菜单背景所在的位置。

    #nav ul li{
    font-weight: bold;
    float: left;
    margin-top: -5px;
    position: relative;
    padding: 6px 5px 0 15px;
    z-index: 99;
    height: 50px;
    background-position:left center;
    background-image: url(../images/bussel/menu-blad1.png) !important;
    background-repeat: no-repeat;

}
#nav ul li a{
    background-color: #feb24e;
    display: block;
    width: 153px;
    height: 35px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    position: relative;
    z-index: 98;
}

Answer 1

我已经这样做了(div 方式):

链接:

<li><span class="blad"></span><a href="#">Groepen</a></li>

CSS:

    #nav ul li{
    font-weight: bold;
    float: left;
    margin-top: -5px;
    margin-right: 5px;
    position: relative;
    padding: 6px 5px 0 15px;
    z-index: 99;
    height: 50px;
    }

    #nav ul li a{
    background-color: #feb24e;
    display: block;
    width: 153px;
    height: 35px;
    color: #fff;
    text-decoration: none;
    margin: 10px 0px 0px 0px;
    }

    #nav ul li span.blad{
    width: 35px;
    height: 43px;
    background-position:left center;
    background-image: url(../images/bussel/menu-blad.png);
    background-repeat: no-repeat;   
    float: left;
    margin: 4px 5px 0px -15px;
    }

成功了，谢谢!