导航栏 ul 左侧有距离

Question

我想用下拉菜单制作我的导航栏，但div 下拉菜单的左侧总是有距离。如何消除该距离？

这是导航栏的代码：

.navbar {
                background-color: #6b6b6b;
                margin:10px;
            }
            .navbar ul {
                display: inline;
                color: white;
                font-family: "Agency FB";
                font-weight: bold;
                text-transform: uppercase;
                list-style-type: none;
                font-size: 24px;
            }
            .navbar ul li {
                display: inline-block;
                padding-right: 10px;
                padding-left: 10px;
                padding-top: 5px;
                padding-bottom: 5px;
            }
            .navbar ul li:hover {
                background-color: #cccccc;
            }
            .navbar ul li ul {
                display: none;
                position: absolute;
                margin-left:-10px;
                margin-top:5px;
                background-color:white;
                color:#6b6b6b;
                padding-left:-20px;
                font-size:20px;
            }
            .navbar ul li ul li { 
              display: block; 
            }
            .navbar ul li:hover ul {
                display: block;
                opacity: 1;
                visibility: visible;
            }

这是html导航栏的代码（没有链接）：

    <div class="navbar">
        <ul>
            <li>
                Home
            </li>
            <li>
                Category
                <ul>
                    <li>Batik</li>
                    <li>Party</li>
                    <li>Office</li>
                    <li>Casual</li>
                    <li>Sport</li>
                </ul>
            </li>
            <li>
                Information
                <ul>
                    <li>
                        About Us
                    </li>
                    <li>
                        Cara Belanja
                    </li>
                    <li>
                        Our Location
                    </li>
                </ul>
            </li>
            <li>
                Contact Us
            </li>
        </ul>
    </div>

在:)之前谢谢

Answer 1

我为你重新制作了它，我相信你会明白它的要点

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Category</a>
            <ul>
                <li><a href="#">Blah</a></li>
                <li><a href="#">Blah</a></li>
                <li><a href="#">Blah</a></li>
            </ul>
        </li>
        <li><a href="#">Information</a>
            <ul>
                <li><a href="#">Blah</a></li>
                <li><a href="#">Blah</a></li>
                <li><a href="#">Blah</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS http://jsfiddle.net/un64F/3/

Answer 2

我不确定我是否确切地理解您的要求，但是在.navbar ul样式中添加padding-left: 0;会产生您想要的效果吗？