Submenu under background

by Valentin Sarychev

HTML

<ul class="menu">
    <li>
        <a href="#">Main 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub A</a></li>
            <li><a href="#">Sub B</a></li>
            <li><a href="#">Sub C</a></li>
            <li><a href="#">Sub D</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Main 2</a>
        <ul>
            <li><a href="#">Sub 4</a></li>
            <li><a href="#">Sub 5</a></li>
            <li><a href="#">Sub 6</a></li>
            <li><a href="#">Sub 7</a></li>
            <li><a href="#">Sub 8</a></li>
            <li><a href="#">Sub 9</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Main 3</a>
        <ul>
            <li><a href="#">Sub 10</a></li>
            <li><a href="#">Sub 11</a></li>
            <li><a href="#">Sub 12</a></li>
            <li><a href="#">Sub X</a></li>
            <li><a href="#">Sub Y</a></li>
        </ul>
    </li>
</ul>

CSS

.menu {
    position: relative;
    padding: 0;
}

/**
 * main menu background
 */
.menu:before {
    content: "";
    background-color: rgba(0,0,111,0.6);
    z-index: 1;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100px;
}

.menu li {
    width: 150px;
}

/**
 * main menu
 */
.menu > li {
    display: inline-block;
    margin: 20px;
}
.menu > li > a {
    position: absolute;
    z-index: 1;
}

/**
 * sub menu
 */
.menu ul {
    position: absolute;
    padding: 0;
    display: none;
}
.menu ul li:first-child {
    margin-top: 25px;
}
.menu ul li {
    display: block;
    background-color: yellow;
}

/**
 * mouse hover
 */
.menu > li:hover ul,
.menu ul:hover {
    display: block;
}