How to change CSS style of nested list items?
- by Yasir
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>
