css - 带有 child 的菜单下的额外填充

Question

嘿伙计们，我的菜单有一些问题，有一个奇怪的填充将我的菜单向右推了几个像素，但我设法在主要 parent 上修复了它，最初他们都推出了相同的数量。

图片 这是一个更好的观点

我正在运行我的 css 并添加 padding-left:0px;

如果有人可以帮助我，这是我的代码。

<div class="css_menu_two_line">
<ul class="two_line_menu">
    <li><a href="#">Menu 1</a></li><li>
    <a href="#">Menu 2</a></li><li class="current"><a href="#">Menu 3 SHOW</a>
        <ul>
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li><li><a href="#">Menu 4</a></li><li><a href="#">Menu 5</a></li>
</ul>
</div>

CSS:

.css_menu_two_line {
    width:100%;
    overflow:hidden;
}

.two_line_menu {
padding-left: 0;
    position: relative;
    margin-bottom: 40px;
    background:#77f url('img_bg.gif') repeat-x;
}

.two_line_menu a {
    display: block;
        color: #fff;

    text-decoration: none;
    padding:10px;
}

.two_line_menu li:hover a {
    color: #fff;
    background: #aaf;
}

.current a {
    color: #fff;
    background: #aaf;
}

.two_line_menu li { display: inline-block; }

.two_line_menu li ul {     display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: #aaf;
    top: 38px; }

.two_line_menu li:hover ul {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: #aaf;
    top: 38px;
}

.two_line_menu li ul li:hover a { color: #000; }

fiddle :http://jsfiddle.net/uf2cnakc/

Answer 1

您需要从 .two_line_menu li ul 中移除填充。为此，我们可以添加以下样式 padding: 0;。

许多 HTML 元素都有默认样式，因此请注意这一点。

这个类的 CSS 现在应该看起来像这样:

.two_line_menu li ul {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: #aaf;
    top: 38px;
    padding: 0; /* Just added */
}

Demo Here