CSS我在做什么错？ 无序列表中的背景图像

Question

.navbar {
    position:relative;
    height: 50px;
}
ul {
    height:inherit;
    position:absolute;
    top:19%;
}

ul li {
    height:inherit;
    padding: 10px 1px 10px 1px;
    display:inline;
    font-size:1.3125em; 
    transition: all 0.4s ease;
}

ul li:hover {
    background-color: #0E0E0E;
    background: url(img/a.svg) no-repeat;
    background-position: 0px 5px;


}

So, basically, i would like to apply an image to the highlighted unordered list items, but this image NEVER appears, how is that?

Answer 1

You've got the image url incorrect. Either that or you have some other styles conflicting or your CSS does not correctly match your HTML .

See this fiddle. Using what I'd expect your HTML structure to be, it works fine using an external image;

JS FIDDLE 1

If you also want the background colour to be applied as well as the picture you'd need to change your CSS to this;

ul li:hover {
    background-color: #0E0E0E;
    background-image: url(img/a.svg);
    background-repeat: no-repeat;
    background-position: 0px 5px;
}

JS FIDDLE 2