左侧有距离的导航栏 ul答案

【问题标题】：Navbar ul with distance on left左侧有距离的导航栏 ul
【发布时间】：2013-10-31 01:55:25
【问题描述】：

我想用下拉菜单制作我的导航栏，但 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>

感谢之前:)

【问题讨论】：

标签： html css uinavigationcontroller navigation navbar

【解决方案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>

http://jsfiddle.net/un64F/3/ 用于 css

【讨论】：

【解决方案2】：

我不确定我是否完全理解您的要求，但是将 padding-left: 0; 添加到 .navbar ul 样式是否具有您想要的效果？

【讨论】：