Search code examples
cssmenuparent-childpaddingsubmenu

Extra padding under menu with child

hey guys I am having a few issues with my menu, theres a weird padding that pushes my menu to the right a few pixels but I managed to fix it on the main parents, originally they were both pushing out the same amount.

Pic enter image description here and heres a better view enter image description here

I am running through my css and adding padding-left:0px;

Heres my code if anyone can assist me.

<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/

Solution

  • You need to take away the padding from .two_line_menu li ul. To do this we can add the following style padding: 0;.

    A lot of HTML elements have default styles, so beware of this.

    Your CSS for this class should now look something like this:

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

    Demo Here