下拉菜单中的不需要的空间

Question

我正在尝试创建一个HTML和CSS下拉菜单，但我在下拉列表中的每个选项之间都有一个非空间。似乎有一个保证金，但显然没有。此外，下拉div似乎没有调整大小。我一直在寻找这样的问题，但我没有找到任何问题。这是CSS：

#navBar ul li ul {
        width: 300px;
        margin-left: -50px;
        background: #0174DF;
        color: #FFFFFF;
}
#navBar ul li ul li {
        color: #FFFFFF;
        font-size: 20px;
        display: block;
        padding-top: 5px;
        padding-bottom: 5px;
}

当然是HTML：

<div id="navBar">
            <ul>
                    <li><a href="landing.php"><text>Site</text></a></li>
                    <li><a href="home.php"><text>Home</text></a></li>
                    <li><a href="music.php"><text>Music</text></a></li>
                    <li>
                            <text>More</text>
                            <ul>
                                    <li>Drawing Board</li>
                                    <li>Contact Us</li>
                            </ul>
                    </li>
            </ul>
</div>