I have a CSS dropdown menu, but the thing is slightly shifted to the right. I believe the reason is that even though I have list-style:none, I think the list is still keeping room for the bullet point. I don't want any margin in the left side, but I can't get it to work. I took a screenshot so you might be able to understand what I'm talking about. Notice the selection box around "Food*" doesn't go all the way to the left border of the cell. How do I do this?

Here is the HTML:

<table width="100%" border="0">
<tr>
<th width="5%" scope="col"></th>
<th width="13%" scope="col" align="center"><a href="<?php echo $date_link;?>" title="Sort by date">Date</a></th>
<th width="21%" scope="col" align="center">
<div id="foodMenu">
<ul class="dropDownMenu">
<li><a href="#" onclick="javascript:showlayer('subLayer')" title="Sort by food">Food*</a></li>
<ul class="subDropDownMenu" id="subLayer" onmouseout="javascript:showlayer('subLayer')">
<li><a href="<?php echo $food_name_link;?>" title="Sort by food name">Sort by food name</a></li>
<li><a href="<?php echo $food_rating_link;?>" title="Sort by food rating">Sort by food rating</a></li>
</ul>
</ul>
</div>
</th>
<th width="22%" scope="col" align="center"><a href="<?php echo $restaurant_link;?>" title="Sort by restaurant/brand">Restaurant/Brand*</a></th>
<th width="13%" scope="col" align="center"><a href="<?php echo $sensitive_link;?>" title="Sort by sensitivity">Sensitivity*</a></th>
<th width="21%" scope="col" align="center">Notes</th>
<th width="5%" scope="col" align="center"></th>
</tr>
</table>


And the CSS:

ul, li{list-style:none;}

#foodMenu{
height:0px;
padding-bottom:36px;
/*padding:0px 78px 36px 0px;*/
/*width:150px;*/
}

#foodMenu .dropDownMenu li {
float:none;
/*width:150px;*/
}
#foodMenu .dropDownMenu li a{
display:block;
}

#foodMenu .subDropDownMenu li:hover ul, li.over ul {
display:block;
}

#foodMenu ul .subDropDownMenu {
border:solid 1px #004A66;
background:#FFFFFF;
position:relative;
width:150px;
padding:0px 0px;
clear:both;
z-index:100;
display:none;
}
#foodMenu ul .subDropDownMenu li{
background:none;
display:block;
float:none;
border:0;
height:auto;
line-height:normal;
border-bottom:solid 1px #004A66;
}
#foodMenu .subDropDownMenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
line-height:normal;
}
#foodMenu .subDropDownMenu li a:hover{
background:#5195CE;
color:#FFF;
}

Hello wldumstcs,
Have you set margin:0; on the ul?
Better yet, I always put a reset (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/)at the beginning of my css. Like this - *{margin:0;padding:0;}

You don't say what browser your seeing this shift in. I think IE6 may default the left margin for bullets even if you specify the ul not to use them.

Hey Excavator. Thanks for taking the time to help. I figured out the issue within like 5 minutes of posting this. It turns out I need to put margin-left:-2.5em; under #foodMenu. I am using FF. Once again though, thanks!

Did you try the reset first? I'm not a big fan of negative margins unless they are really needed to accomplish an effect your after.

This seems to work -
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, li{list-style:none;}

#foodMenu{
height:0px;
padding-bottom:36px;
background: #0f0;

/*padding:0px 78px 36px 0px;*/
/*width:150px;*/
}
#foodMenu ul {background: #f00;}
#foodMenu .dropDownMenu li {
float:none;
/*width:150px;*/
}
#foodMenu .dropDownMenu li a{
display:block;
}

#foodMenu .subDropDownMenu li:hover ul, li.over ul {
display:block;
}

#foodMenu ul .subDropDownMenu {
border:solid 1px #004A66;
background:#FFFFFF;
position:relative;
width:150px;
padding:0px 0px;
clear:both;
z-index:100;
display:none;
}
#foodMenu ul .subDropDownMenu li{
background:none;
display:block;
float:none;
border:0;
height:auto;
line-height:normal;
border-bottom:solid 1px #004A66;
}
#foodMenu .subDropDownMenu li a{
background:none;
display:block;
float:none;
padding:6px 6px;
margin:0;
border:0;
height:auto;
line-height:normal;
}
#foodMenu .subDropDownMenu li a:hover{
background:#5195CE;
color:#FFF;
}
</style>

Works great! Thanks!

For some reason when I did that, it reset everything.

Yes, that's why it's called the reset.
Different browsers have different defaults. If you zero out the defaults, you can set your own so they are the same in all browsers.
Check out the link in my first reply.