iamdylanngo · January 7, 2020 04:28
diff --git a/menu-drop-flex-box.html b/menu-drop-flex-box.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #content {
            background-color: purple;
        }
        #menu,
        #menu ul {
            list-style: none;
            background-color: lightblue;
            display: flex;
        }
        #menu > li {
            flex: 1;
            background-color: khaki;
        }
        #menu ul {
            position: absolute;
            display: none;
            z-index: 100;
            background-color: red;
            width: 100%;
        }
        #menu li:hover ul {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
    </style>
 </head>

 <body>
    <div id="content">
        <ul id="menu">
            <li>
                <a href="#">Item 1</a>
                <ul class="block">
                    <li><a href="#">SubItem 1</a></li>
                    <li><a href="#">SubItem 2</a></li>
                    <li><a href="#">SubItem 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Item 2</a>
                <ul class="block">
                    <nav class="one">
                        <li><a href="#">SubItem 1</a></li>
                        <li><a href="#">SubItem 2</a></li>
                        <li><a href="#">SubItem 3</a></li>
                    </nav>
                    <nav class="two">
                        <li><a href="#">SubItem 11</a></li>
                        <li><a href="#">SubItem 22</a></li>
                        <li><a href="#">SubItem 33</a></li>
                    </nav>
                    <nav class="three">
                        <li><a href="#">SubItem 111</a></li>
                        <li><a href="#">SubItem 222</a></li>
                        <li><a href="#">SubItem 333</a></li>
                    </nav>
                </ul>
            </li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>
 </body>

 </html>