styling two level menu (second level)

Question

I have two level horizontal menu that works fine. Second level is not a drop down, it appears on first level menu item click and stays horizontally just under the first level menu.

I need first and second level menu always start from the left side of the container and be full width of the container Currently only first level works like this, but second level doesn't. It starts just under active first level menu item.

You can see it in JSFiddle: http://jsfiddle.net/GrBXa/1/

HTML

<div class="header">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-top-menu-container">
            <ul id="menu-top-menu" class="main_nav">
                <li><a>H1</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="">Prevent</a></li>
                        <li><a href="#">Avoid</a></li>
                        <li><a>P2</a></li>
                    </ul>
                </li>
                <li class="current-menu-item"><a href="#">Sol</a>    
                    <ul class="sub-menu">
                        <li><a>Jan</a></li>
                        <li><a href="">Janu2</a></li>
                        <li><a href="">Janu3</a></li>
                    </ul>
                </li>
                <li><a href="">Why </a>
                    <ul class="sub-menu">
                        <li><a href="">Electri</a></li>
                        <li><a href="">Envir</a></li>
                    </ul>
                </li>
                <li><a href="">Manag</a></li>
            </ul>
        </div>
    </nav>
</div>

CSS:

ol, ul {
    list-style: none;
}
.main-navigation {
    width: 100%;
    height: 38px;
    border-top: 1px solid #4a4a4a;
}
.main-navigation ul {
}
.main-navigation li, .main-navigation li a {
    text-decoration: none;
    color: black;
}
#menu-top-menu {
    height: 38px;
    line-height: 38px;
    display: inline-block;
}
#menu-top-menu>li>a {
    border-bottom: 0;
    white-space: nowrap;
    text-decoration: none;
}
#menu-top-menu>li>a, #menu-top-menu>li {
    display: inline-block;
    text-decoration: none;
}
#menu-top-menu>li >a {
    padding-left: 40px;
    padding-right: 40px;
}
#menu-top-menu>li:hover, .main-navigation ul>li>a:hover {
    background-color: #061361;
}
.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    background-color: #061361;
    height: 26px;
    line-height: 26px;
}
.sub-menu li {
    display: inline;
}
.sub-menu li a {
    display: inline-block;
    padding-left: 14px;
    padding-right: 14px;
    color: white;
}
#menu-top-menu>li:first-child a {
    padding-left: 14px;
}
#menu-top-menu li.current-menu-item ul, #menu-top-menu li.current-menu-parent ul {
    display: inline;
}
#menu-top-menu li.current-menu-item a, #menu-top-menu li.current-menu-parent a {
    background-color: #061361;
    color: white;
}

I believe that this could be done using some relative positioning, but I was not able to achieve this. I have problems with positioning. Please, give me some guidelines.

Answer 1

Hmmm, I'm a little unclear as to what you were looking for - however, I'll try to help out how I can.

I added the following styles to your existing CSS definitions:

#menu-top-menu {
    position:relative;
}

.sub-menu {
    left:0;
    bottom:-26px;
    margin-left:40px;
    width:100%;
}

You'll note that I did use position:relative, as you suspected would be the case. Here's an updated JSFiddle demonstrating what these additional styles achieve.

If this isn't what you were looking for, feel free to let me know and I'll be happy to help you further. Good luck!

Answer 2

Add left:0; width:100%; to your .sub-menu rules.

.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    background-color: #061361;
    height: 26px;
    line-height: 26px;
    left:0;
    width:100%;
}

jsFiddle example