I have a style for styling <a> elements in list items in a #navigation container. This is working fine.

#navigation li a {
  text-decoration:none;
  background:#bfe5ff;
  color:#045e9f;
  width:125px;
  height:35px;
  padding-top:11px;
  display:block;
  float:left;
  margin-left:2px;
  text-align:center;
  font-size:18px;
  font-weight:bold;
}

Now in some <li>s I am inserting <div>s. In these I am again using a list again, but it should be different in style or have no style.

When I put in <li>s, their style matches the outer <li> elements, but it should not.

I am trying to use this:

#newnavigation li a { 
  font-size:12px;
  margin-left:20px;
}

but it's not working - it applies the "outer" styles.

This is my markup:

<ul id="navigation"> 
  <li><a href="index.html">Home</a></li> 
  <li><a href="about.html">About</a></li> 
  <li><a href="contact.html">Contact</a></li> 
  <li class="browse">
    <a href="#">Browse</a>
    <div id="browsecontainer">
      <h3>Browse By Category</h3>
      <li><a href="#"></a></li>
    </div>
  </li>
</ul>