Side-menu bar with sub-menu on hover (for a side-menu with only a few items)

sidemenu.css

#xx-submenu {
    display: none;
}

#xx-submenu-trigger:hover + #xx-submenu,
#xx-submenu:hover {
    display: block;
    position: fixed;
    left: 50px;
    /* NOTE: don't set a top value */
    z-index: 200 !important;
    height: 200px;
    background-color: green;
    margin-top: -20px;
}

sidemenu.html

<div>
    <ul class="nav navbar-nav side-nav">

        <li title="Open submenu" id="xx-submenu-trigger-container">
            <a id="xx-submenu-trigger">Submenu</a>
            <div id="xx-submenu">[submenu content]</div>
        </li>

    </ul>
</div>