CSS Drop Down Hover List creating extra margins

I'm currently designing the following site:

http://www.ultimate-punch.com/

I have a simple categories hover drop down menu (the green box) however it's creating both top and left space and I can't figure out why. Here's the HTML/PHP:

<div id="main_nav_left">
<ul>
    <li>Categories&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#x25BC;
        <ul>
        <? while ($incr_categories != $count_categories) { ?>
            <a href="category.php?cat=<? echo $CATEGORIES[$incr_categories][0]; ?>"><li><? echo strtoupper($CATEGORIES[$incr_categories][0]); ?></li></a>

            <? $incr_categories++;
            } ?>
        </ul>
    </li>
</ul>
</div>

and here's the CSS:

#main_nav_left {
    width: 240px;
    color: #fff;
    font-family: Trebuchet MS;
    font-size: 14px;
    text-transform: uppercase;
    float: left;
    letter-spacing: 1px;
}
#main_nav_left li {
    line-height:50px;
}
#main_nav_left ul li {
    display: block;
    list-style-type:none;
    color: #fff;    
    background-color: #59af56;
    cursor: pointer;
    text-indent: 20px;
}
#main_nav_left ul li ul{
    padding: 0px;
    display: none;
    color: #fff;
    text-indent: 20px;
}
#main_nav_left ul li ul li {
    background-color: #7bc979;
    width: 250px;
    font-size: 26px;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    transition: all .8s;
}
#main_nav_left li:hover ul {
    display: block;
}
#main_nav_left ul li ul li:hover {
    background-color: #59af56;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    transition: all .8s;
}

Can't figure out why it's doing that. Any help would be appreciated!

Answers


The ul has a margin imposed by the browser, so the display breaks. You can apply the following rule to it to make it fall into place:

.main_nav_left ul { margin: 1px 0 0 0 0; }

There is a default margin on the UL that is causing space above it. Not sure about the space to the left. You should look into using a reset or normalize stylesheet.


Need Your Help

Elastic Search - Sort - Switch between integer fields on 0 condition

java indexing lucene elasticsearch

Say I have two double datatype fields called priority1 and priority2.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.