Lengthy sub-menu list items break functionality of CSS nav menu

Question

Probably easiest to just start here and look at the fiddles:

Menu with desired behavior: Correct Example

Menu with broken behavior due to lengthy sub-item: Broken Example

---

I'll explain this as best I can....

I have a side-menu with list items that can contain a second-level menu with its own respective items.

When mousing over the main-menu, the sub-menus appear next to their parent item. The problem occurs when one of the sub-menus have an item with a long amount of text. This makes the following main-menu item's "unreachable", in that you can't just keep going down to click them. You have to mouse out of the sub-menu, then mouse directly to the main-item you want.

The goal here is to have a working multi-level side-menu written only in CSS and HTML.

Answer 1

Your submenu is sitting on top of the other list items because you haven't positioned the submenu properly.

#main_menu li ul{
    position:absolute;
    display:none;
    left:100%;
    top:0;
}

No need to position the submenu li at all.

Try this:

ul{
    list-style:none;
    margin: 0;
    padding: 0;
}
#main_menu{
    width:150px;
}

#main_menu a{
    display:block;
}

#main_menu a:hover {
    background:red;
}

#main_menu li:hover > ul{
    display:block;
}
#main_menu li ul{
    position:absolute;
    display:none;
    left:100%;
    top:0;
}

#main_menu li{
    position:relative;
}

#main_menu li ul li{
    white-space:nowrap;
}



/* just for styling purposes */
#main_menu a{
    width:100%;
    background:#66CCFF;
    text-align:center;
    border:solid black 1px;
}
#main_menu a[href='#']{
    font-weight:bold;
}
#main_menu a[href='#']:after{
    content: "\203A";
    float:right;
}
#main_menu li ul li a{
    background:#CCFFFF
}

<ul id="main_menu">
    <li>
        <a href='#'>Item A</a>
        <ul>
            <li><a href='javascript: return false'>A.1</a></li>
            <li><a href='javascript: return false'>A.2</a></li>
            <li><a href='javascript: return false'>A.3</a></li>
        </ul>
    </li>
    <li>
        <a href='#'>Item B</a>
        <ul>
            <li><a href='javascript: return false'>B.1</a></li>
            <li><a href='javascript: return false'>B.2</a></li>
            <li><a href='javascript: return false'>B.3</a></li>
        </ul>
    </li>
    <li>
        <a href='#'>Item C</a>
        <ul>
            <li><a href='javascript: return false'>C.1</a></li>
            <li><a href='javascript: return false'>C.2</a></li>
            <li><a href='javascript: return false'>Long Sub-element Causes Problem</a></li>
            <li><a href='javascript: return false'>C.4</a></li>
            <li><a href='javascript: return false'>C.5</a></li>
        </ul>
    </li>
    <li><a href='javascript: return false'>Now reachable</a></li>
    <li><a href='javascript: return false'>Now reachable</a></li>

Answer 2

As mentioned by Ahs in the comments, the z-index will fix it like this http://jsfiddle.net/o1rtdxms/5/

ul{
    list-style:none;
}
#main_menu{
    width:150px;
}

#main_menu a{
    display:block;
}

#main_menu li:hover > ul{
    display:inline;
     z-index: -1000;
}
#main_menu li ul{
    position:absolute;
    display:none;

}
#main_menu li ul li{
    position:relative;
    top:-20px;
    left:112px;

}

Answer 3

Your Fiddles both work exactly the same for me.

If you want to do this in pure HTML/CSS (on your end), it'd be easier to use a framework like Bootstrap (they do the JS for you, you just use classes, which limits it to HTML/CSS, as you requested).

You should try it on different browsers to see what works and what doesn't, and the browser that doesn't work should lead you to ask some more questions cross-browser-compatible related.