Overriding user agent stylesheet

For some reason my website won't use my styles!

I have this in my stylesheet:

#nav {
  margin: 15px 0 15px 0;
  padding: 0;
  width: 965px;
  background: #ffffff;
  border-bottom: 0px #f2e9e1 solid;
  height: 2.1em;
}

#nav ul {
  display: block;
  margin: 0;
  padding: 0 0 0 10px;
  line-height: 17px;
  list-style: none;
  z-index: 90
}

#nav ul li {
  float: left;
  margin: 0 1px 0 0;
  padding: 0;
  font-size: 14px;
  letter-spacing: 1.0px;
  line-height: 17px;
  list-style-type: none;
  white-space: nowrap;
}

#nav ul li a {
  float: left;
  display: block;
  width: auto;
  font-weight: normal;
  background: transparent;
  text-decoration: none;
  color: #1c140d;
   margin: 0;   
}

Part of my HTML:

<div id="nav">
    <ul class="level1">
            <li><a href="http://comparative-legume开发者_如何转开发s.org/development_activities">Development</a></li>
            <li class="sep">|</li>
            <li> <a href="#" class="no_cursor">Search</a>
                    <ul class="level2" style="position: absolute; top: 0px; left: 0px; visibility: hidden; ">
                            <li><a href="http://search.comparative-legumes.org">Seqqle search by sequence</a></li>
                            <li><a href="http://soybase.org:8085/cvits/new">CViT search tool</a></li>
                            <li><a href="http://soybase.org:8085/gene_families">Leggle search</a></li>
                    </ul>
            </li>

But my developer tools says that the matched CSS rules for the first <li> is li instead of #nav ul li.

Any idea?

---

Just an idea, but make sure your stylesheet is actually being loaded. Unless you've changed something in your browser, there is no reason those styles shouldn't be working.

Also, if you can, provide a URL we can look at.

---

Your HTML / CSS seems to be working as intended; I can see that the | turns red when I add color: red; to the #nav ul li rule. There must be something else (style sheet garbled or not loaded, other code) going on here.