CSS li background issue

I have a horizontal nav and I'm trying to use images for the li classes however, when I try .nav li .home{background:img url;} the image doesnt show, how can I fix this?

CSS

开发者_如何学C

.nav {
    position: absolute;
    height: 20px;
    width: 100%;
    background-image: url(images/nav.png);
    background-repeat: repeat;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 3;
}
.nav li {
    padding-left: 10px;
    list-style-type: none;
    margin-top: auto;
    margin-bottom: auto;
}
.nav li a {
    margin-top: 5px;
    margin-bottom: 5px;
}
.nav li.home {
    background: url(images/home.png);
}

HTML:

<ul class="nav">
<li>
<a herf="#" class="home">home</a>
</li>
</ul>

---

I'm trying to use images for the li classes

.nav li .home does not target the li. It will target elements with class name of "home" within the li. Without HTML source code, I cannot give a definite solution. But if I were to guess, your HTML is like this:

<ul>
 <li class="home">
  <a href="index.html">home</a>
 </li>
 <li class="about">
  <a href="about.html">about</a>
 </li>
</ul>

In this case, you would change your CSS to:

.nav li.home

By removing the space, the li is targeted.

---

Your <li> has to have a value - otherwise it won't appear. You can use   or real text like "home" and set text-indent: -999; to move it offscreen.

---

Your selector .nav li.home Will select list items with the class 'home' In your case, the list items do not have a class .home, it's the links inside the list item that has the class. li.home would have worked on the following lines of html:

<ul class="nav">
<li class='home'>
<a herf="#"></a>
</li>
</ul>

but when you edit this line to .nav li .home with a whitespace between the li and the .home, it will select the elements with class home "inside" the list item. In that case, the background will be added to the <a herf="#" class="home"></a> , so the image will be a link. It's both possible.

You also have to give the element with the background a width and a height to fit the background image. if the element is 0x0, you can't see the background.

Did you also check the url? if you go to the path of the image directly in your browser, does it give you a 404 error?