hover submenu to left css

Question

trying to have a submenu on left side when i hover the li but the problem is that it also display space under the li. In this demo when awesome link 3 is hover there's some space under the li click here

<div id="navbar" class="navbar">
    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
        <div class="menu-mega-container">
            <ul id="menu-mega" class="nav-menu">
                <li>
                    <a href="#">My awesome button</a>
                </li>
                <li class="has_children">
                    <a href="#">My awesome button</a>
                    <ul>
                        <li>
                            <a href="#">awesome link nº 1</a>
                        </li>
                        <li>
                            <a href="#">awesome link nº 2</a>
                        </li>
                        <li class="has_children">
                            <a href="#">awesome link nº 3</a>
                            <ul>
                                <li>
                                    <a href="#">awesome link nº 1</a>
                                </li>
                                <li>
                                    <a href="#">awesome link nº 2</a>
                                </li>
                                <li>
                                    <a href="#">awesome link nº 3</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

and the css

nav {
    position: relative;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav > div > ul > li {
    float: left;
}
nav > div > ul > li > a:hover {
    background-color: red;
}
nav > div > ul > li > ul {
    position: absolute;
    background-color: green;
    display: none;
    z-index: 500;
}
nav > div > ul > li:hover > ul {

    display: block;
}
nav li > ul ul {
    display: none;
}

nav li > ul li:hover > ul {
    display: block;
    position: relative;
    left: 100%;
    top: -20px;
    background-color: green;
}

Answer 1

The reason why you see spacer here is that you make "nav li > ul li:hover > ul" positioned by 'relative' , so that the parent of it would be expanded by its height too.

I recommend you using "absolute" instead of "relative".

nav li > ul li:hover > ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 20px;
  background-color: green;
  width: 100%;
}

then make its parent positioned by "relative".

.has_children {
  position: relative;
}

For the effect, please try this .

Answer 2

As edmond wang said use position "absolute" instead of "relative" for the .has_children's children, otherwise the element would still be part of the flow and a space will be kept for it. Giving the element a position absolute would take it out of the flow hence eliminate the extra space.

.has_children {
   position: relative;
}

Try to use classes, for code readability and maintainability.

.is_children {
  position: absolute;
  width: 100%;
  top: 2px;
  left: 100%;
  padding: 8px;
}

Also try to give a different class to the main parent "ul"

Have a look at the fiddle here