remove inset from UL inside another UL?

Hey all

I'm putting together this site for a friend who's using WordPress as a CMS. Everything is working beautifully, apart from the sub-menu items. WordPress automatically used UL and LI for its primary links. If you have a 'subpage', it's rendered as another UL inside the original, like so:

<ul id="menulist">
<li class="page_item current_page_item"><a href="./" title="Home">Home</a></li>
<li class="page_item"><a href="./?page_id=4" title="Business Services">Business Services</a>
<ul>
<li class="page_item"><a href="./?page_id=5" title="Bookkeeping & Payroll">Bookkeeping & Payroll</a></li>
<li class="page_item"><a href="./?page_id=6" title="Accounting & Tax Work">Accounting & Tax Work</a></li>
<li class="page_item"><a href="./?page_id=7" title="Management Accounting">Management Accounting</a></li>
</ul>
</li>
<li class="page_item"><a href="./?page_id=8" title="Education & Learning">Education & Learning</a></li>
<li class="page_item"><a href="./?page_id=9" title="Consultancy & Research">Consultancy & Research</a></li>
</ul>


If you take a look at http://proactiveresolutions.com/ you'll see the menu on the left and the sub-menu items. I can style them pretty much any way I want, but I can't seem to ditch that padding on the left! I've tried padding and margins, but to no avail. Here's the CSS:

/* MAIN MENU LIST */

#menulist {
text-align: right;
width: 185px;
padding: 0px;
margin: 0px 10px 20px 10px;
list-style: none;
}

/* MENU TITLE ITEM */

#menulist li {
list-style: none;
color: #514E33;
font-weight: bold;
font-style: italic;
font-size: 14px;
font-family: Times New Roman;
}

/* MENU SUBPAGE ITEM */

#menulist li ul li {
font-family: Trebuchet MS;
font-size: 11px;
font-weight: normal;
font-style: normal;
}

/* MENU LINK DEFINITIONS */

#menulist a {
color: #514E33;
line-height: 10px;
text-decoration: none;
border-bottom: 1px dotted #968E5F;
display: block;
padding: 6px 16px 6px 10px;
}

#menulist a: hover {
background-color: #E4D394;
}

Any light you can shed on this would be very gratefully received!

I don’t see you having tried to remove the left padding from the sub-list?

#menulist ul {padding: 0;}

Thanks for the suggestion; this works in Firefox, but not in IE. I don't think I'd noticed it working in FF before.

Any suggestions for getting it to work in IE? The client doesn't use Firefox, so he won't see any change and still thinks it's broken :/

Yes I know how: Set the margin too.


ul ul {
margin: 0;
padding: 0;
}


That’s the first thing I usually do with lists.

Perfect - worked first time! I could have sworn i tried all sorts of combinations with margins and padding *scratches head*

Thanks!