3-level Menu

by kuonyuu

HTML

<ul class="navTopBar">
    <li>
        <div class="itemHolder">
            <label for="">base level</label>
        </div>
        
        <ul>
            <li>
                <div class="itemHolder">
                    <label for="">second level 1</label>
                </div>
                
                <ul>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>

                </ul>
            </li>

            <li>
                <div class="itemHolder">
                    <label for="">second level 2</label>
                </div>
                
                <ul>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="itemHolder">
                    <label for="">second level 3</label>
                </div>
                
                <ul>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="itemHolder">
                    <label for="">second level 4</label>
                </div>
                
                <ul>
                    <li>
                        <div class="itemHolder"><label for="">three level</label></div>
                    </li>
                </ul>
            </li>

       ...

SCSS

* {
    vertical-align: top;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.itemHolder {
    border: 1px solid;
    padding: 2px 8px;
    line-height: 24px;
    background-color: #fff;
}

.navTopBar {
    > li {
        &:not(:first-child) > .itemHolder { border-left: none; }
    }
    
    li {
        position: relative;
        width: 200px;
        display: inline-block;
        /* float: left; */

        ul {
            display: none;
            
            > li {
                > .itemHolder {
                    &:first-child { border-top: none; }
                }  
            }
            
            ul {
                position: absolute;
                left: 100%;
                top: -1px;
                
                .itemHolder { 
                    border-left: none;
                }
                
                > li:first-child {
                    .itemHolder { border-top: 1px solid; }

                }
            }
        }
        
        &:hover {
            > ul {
                z-index: 100;
                display: block;
            }
        }
    }
}