带有孩子的菜单下的额外填充

Question

嘿伙计们我的菜单有一些问题，有一个奇怪的填充将我的菜单向右推几个像素，但我设法把它固定在主要的父母身上，原来他们都推出了相同的数量。

产品图 而且这是一个更好的观点

我正在浏览我的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; }

小提琴：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

Answer 2

你的CSS包含display：inline，它具有块子元素和绝对位置。试试这个CSS属性。

.two_line_menu li {display：block;向左飘浮; }

.two_line_menu li ul {position：absolute;左：0;填充：0;宽度：100％;背景：#aaf;顶部：38px; }

.two_line_menu li ul li {float：left;}