I've created dynamic menu in ASP.NET Webform application. Here is the structure of my menu:

[![enter image description here](https://i.stack.imgur.com/CIOIZ.png)](https://i.stack.imgur.com/CIOIZ.png)

In which sub-menu is properly generated.

Now I am going to apply some CSS to make it eye-catching.

Here is my desire output after applying CSS on it by using SCSS pre-processor.

[![enter image description here](https://i.stack.imgur.com/ibYmF.png)](https://i.stack.imgur.com/ibYmF.png)

**Issue**

The issue on the above image is, the sub-menu abcd is hide behind the abcd2. Which means if I add more 3rd level sub-menu then all sub-menus hide behind the last one. 

Here is my dynamic generated HTML which I've copied from browser console.

```
<aside class="ah-master-asidebar">
<ul id="menu">
    <li>
        <a class="ah-anchor-tooltip-show" href="javascript:void(0)">
            <i class="fa fa-home fa-lg" aria-hidden="true"></i>
        </a>
        <ul class="sub-menu" style="display: none;">
            <li>
                <a href="/">
                    <strong>Dashboard</strong>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a class="ah-anchor-tooltip-show" href="javascript:void(0)">
            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
        </a>
        <ul class="sub-menu" style="display: block;">
            <li>
                <a href="javascript:void(0)">
                    <strong>Setups</strong>
                </a>
                <ul style="display: block;">
                    <li>
                        <a href="/Views/NavigationCreation.aspx">
                            <strong>Navigation Creation</strong>
                        </a>
                        <ul style="display: block;">
                            <li>
                                <a href="javascript:void(0)">
                                    <strong>abcd</strong>
                                </a>
                            </li>
                        </ul>
                        <ul style="display: block;">
                            <li>
                                <a href="javascript:void(0)">
                                    <strong>abcd 2</strong>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/SetupFormCreation.aspx">
                            <strong>Form &amp; Navigation Mapping</strong>
                        </a>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/RoleCreation.aspx">
                            <strong>Role Creation</strong>
                        </a>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/RoleRights.aspx">
                            <strong>Role Rights</strong>
                        </a>
                    </li>
                </ul>
                <ul style="display: none;">
                    <li>
                        <a href="/Views/RoleAssignments.aspx">
                            <strong>Role Assignment</strong>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</aside>

```

CSS:

```
.ah-master-asidebar {
height: auto;
width: 50px;
background-color: #222222;
position: fixed;
z-index: 999;
margin: 6px;
color: white;
display: inline-block;
border-radius: 6px;
padding: 10px 0 10px 0;

a {
    padding: 6px;
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;
}

li {
    white-space: nowrap;
}

#menu {
    list-style: none;
    padding: 0;
    margin-bottom: 0;

    .sub-menu {
        width: 160px;
        display: none;

        ul {
            padding-left: 6px;
            width: 160px;
            list-style: none;
            padding: 0;

            li {
                position: relative;
                white-space: nowrap;
            }

            li {
                a:hover {
                    background-color: #495057;
                    color: white;
                }
            }

            ul {
                padding-left: 6px;
                position: absolute;
                top: 0;
                left: 200px;
            }
        }
    }
}

#menu > li {
    position: relative;
    white-space: nowrap;
    margin: 3px 0;

    .sub-menu {
        position: absolute;
        top: 0;
        left: 50px;
        padding: 0;
        list-style: none;
        padding-left: 6px;
        width: auto;

        li {
            width: 200px;

            a {
                background-color: #222;
            }
        }
    }

    .sub-menu > li:first-child > a {
        background-color: #3276b1;
    }
}

#menu:first-child > li > a.ah-anchor-tooltip-show:hover {
    background-color: #495057;
}
}

```

**JSFiddle**

[Link](http://jsfiddle.net/xpvt214o/791935/)

**Conclusion**

As I describe my problem briefly, please let me know what I'm doing wrong in my above HTML or CSS code?