Extra spacing on CSS Menu - css

Question

I'm having a weird problem with my CSS menu. There is a huge space above the links.
I tried everything from removing all the margin and padding settings from the css and still nothing. The only way I can remove the extra spacing is to delete all the li.
Can anyone see what I'm doing wrong?
http://jsfiddle.net/3dB7v/
<div id="test_nav">
<div id="test_subnav">
<ul id="test_ul">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<asp:panel id="pnlUpdateDate" cssclass="UpdateDate" runat="server">Last Update: 11-26-2013</asp:panel>
</div
#test_nav
{
text-align: left;
padding: 5px;
border: 1px dashed blue;
}
#pnlUpdateDate
{
width: 200px;
border: 1px dashed blue;
}
#test_subnav
{
float: right;
position: relative;
z-index: 1000;
padding: 0;
border: 1px solid red;
}
#test_ul li
{
position: relative;
list-style: none;
margin: 0;
padding: 0;
z-index: 1001;
b1order: 1px dashed orange;
}
#test_ul li ul
{
margin-left: 0;
padding: 0;
}
#test_ul > li
{
float: left;
padding: 3px; /* padding-top: 3px; padding-bottom: 3px; */
margin: 0 2px 0 0;
}
#test_ul > li > a, #test_ul > li > span
{
display: block;
padding: 4px 4px 4px 4px;
margin: 0 3px 0 3px;
font-size: 14px;
font-weight: bold;
color: black;
text-decoration: none;
}
#test_ul > li > span
{
cursor: default;
}
#test_ul > li:hover > a, #test_ul > li.active > a
{
color: Red;
}
#test_ul > li:hover > a:active
{
color: #3B96B6;
}
#test_ul > li:hover > span
{
color: #3B96B6;
}

Answer 1

That space belongs to the default margins of the ul#test_ul element applied by the useragent.
You should reset the default stylesheet applied by user agent on the list element, as follows:
ul#test_ul {
padding: 0;
margin: 0;
}
You can refer to this answer for further details:
User agents apply some default styles to the HTML elements. For
instance they apply a top and bottom margin on the <p>, <ul>, ... elements.
As Google Chrome sets -webkit-margin-before: 1em; and -webkit-margin-after: 1em;.
Working Demo
It's better to reset user agent stylesheet before any author stylesheet to prevent unexpected issues.

Answer 2

Try removing the margin and padding from the ul element.

Answer 3

A quick and dirty way would be * { padding:0; margin:0; }
What you are seeing is the browser default styles. Consider locating a "reset" stylesheet and always applying it first before any other styles. I like this one: http://meyerweb.com/eric/tools/css/reset/
Address the problem, not the symptoms. You'll run into this all the time if you don't. Each browsers default styles are different. Zeroing them all out is the only way to get consistency throughout.

Answer 4

It looks like you need to add this to your CSS:
#test_ul {
padding: 0;
margin: 0;
}