Odd margin

I'm building a new page, and I am unable to remove it. Here is the result:
[IMGhttps://lh5.googleusercontent.com/_jYKDw8mt2P0/TZd5M-nKKZI/AAAAAAAAAz8/ngt8bWuwkPU/s640/css_errors.png[/IMG]
(I have not yet added this to my server)

Here is my HTML:
<div id="content2">
<div class="menunav">
<ul>
<li class="green">
<p><a href="#">Option 1</a></p>
</li>
<li class="yellow">
<p><a href="#">Option 2</a></p>
</li>
<li class="red">
<p><a href="#">Option 3</a></p>
</li>
<li class="blue">
<p><a href="#">Option 4</a></p>
</li>
<li class="purple">
<p><a href="#">Option 5</a></p>
</li>
<li class="green">
<p><a href="#">Option 6</a></p>
</li>
</ul>
</div>

<div class="bottomcontent">
<div class="sitetab" id="rct">
Left content
</div>
<div class="sitetab" id="sbp">
Center content
</div>
<div class="sitetab" id="mmr">
Right content
</div>
</div>
</div>

And my CSS is:

div#content2
{
width:852px;
margin:0 auto;
background:#FFFFFF
}
/* Menus */
div.menunav
{
position: relative;
height: 50px;
margin: 0px;
padding: 0px;
background: #CCCCCC
}
div.menunav li
{
width:100px;
height:50px;
float:left;
text-align:center;
overflow:hidden;
margin: 0px;

}
div.menunav li p a
{
text-decoration: none;
font-weight: bold;
font-family: verdana;
color:#FFFFFF
}
div.menunav li p.subtext
{
text-decoration: none;
font-family: comic sans ms;
color:#FFFFFF
}
div.menunav li.green
{
background:#6AA63B
}
div.menunav li.yellow
{
background:#FBC700
}
div.menunav li.red
{
background:#D52100
}
div.menunav li.purple
{
background:#5122B4
}
div.menunav li.blue
{
background:#0292C0
}

div.bottomcontent
{
position: absoulute;
overflow:hidden;
width: 852px;
height: 245px;
float: left;
background: #ffffff;
margin: 4px;
-moz-box-shadow: 0px 0px 3px 3px #888;
-webkit-box-shadow: 0px 0px 3px 3px#888;
box-shadow: 0px 0px 3px 3px #888;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px
}

div.sitetab
{
z-index: 1000;
float: left;
position:absoulute;
bottom: 0;
width: 264px;
margin: 10px;
background: #ff0000;
cursor: pointer;
-moz-box-shadow: 0px 0px 3px 3px #888;
-webkit-box-shadow: 0px 0px 3px 3px#888;
box-shadow: 0px 0px 3px 3px #888
}
div.sitetab #rct //"RCT" content
{
left: 0px
right: 568px
}
div.sitetab #sbp //"SBP" content
{
left: 284px
right: 284px
}
div.sitetab #mmr //"MMR" content
{
left: 568px
right: 0px
}


What is causing the space between the top <div> and the menunav?

Thanks!:thumbsup:

Add the Russ Myer's reset to the top of your css.

http://meyerweb.com/eric/tools/css/reset/

Hello Mooseman,
You must be talking about the default 16px margin on the ul.
Remove, or adjust to what you need, by adding something like this to your
CSS - .menunav ul {margin: 0;}

Hello Mooseman,
You must be talking about the default 16px margin on the ul.
Remove, or adjust to what you need, by adding something like this to your
CSS - .menunav ul {margin: 0;}

Thanks!:thumbsup: Never realized the ul default was 16px.