JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--
ul.menu>li*4>(a[href="#"]>lorem4)>ul.sub-menu.clearfix>li.sub-menu-item*2>.sub-menu-section>(.header>lorem1)+>ul.list.clearfix>li*12>a[href="#"]>lorem1
-->

<div class="header">
    <ul class="menu">
        <li>
            <a href="#">Lorem ipsum dolor sit.</a>
            <ul class="sub-menu clearfix">
                <li class="sub-menu-item">
                    <div class="sub-menu-section">
                        <div class="header">Lorem.</div>
                        <ul class="list clearfix">
                            <li><a href="#">Lorem.</a></li>
                            <li><a href="#">Consequuntur!</a></li>
                            <li><a href="#">Repellat!</a></li>
                            <li><a href="#">Ea!</a></li>
                            <li><a href="#">Eius!</a></li>
                            <li><a href="#">Facere.</a></li>
                            <li><a href="#">Porro!</a></li>
                            <li><a href="#">Omnis.</a></li>
                            <li><a href="#">Dolorem.</a></li>
                            <li><a href="#">Dignissimos?</a></li>
                            <li><a href="#">Similique.</a></li>
                            <li><a href="#">Amet.</a></li>
                        </ul>
                    </div>
                </li>
                <li class="sub-menu-item">
                    <div class="sub-menu-section">
                        <div class="header">Dicta!</div>
                        <ul class="list clearfix">
                            <li><a href="#">Lorem.</a></li>
                            <li><a href="#">Magnam.</a></li>
                            <li><a href="#">Magni?</a></li>
                            <li><a href="#">Assumenda?</a></li>
                            <li><a href="#">Optio!</a></li>
                            <li><a...

SCSS

$menu-width: 300px !default;
$body-padding: 20px !default;

html {
    background: #f00;
}

body {
    padding: $body-padding;
    
    background: transparent;
}

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

.header {
    .menu {
        padding: 15px 0;
        position: relative;
        z-index: 1;
        width: $menu-width;
        height: 300px;
        
        background: yellow;
        
        > li {
            padding: 0 15px;

            &:hover {
                .sub-menu {
                    display: block;
                }
            }
        }
    }
    
    .sub-menu {
        display: none;
        padding: 15px;
        position: absolute;
        z-index: 1;
        left: 100%;
        top: 0;
        bottom: 0;
        width: calc(100vw - #{$menu-width} - (#{$body-padding} * 2));
        
        background: #fff;
        
        &-item {
            float: left;
            width: 50%;
        }
        
        &-section {
            .header {
                font-weight: bold;
                
                position: relative;
                padding-bottom: 30px;
                margin-bottom: 30px;
                
                &:after {
                    display: block;
                    position: absolute;
                    z-index: 1;
                    left: 0;
                    bottom: 0;
                    width: 50%;
                    height: 3px;
                    
                    content: '';
                    
                    background: #aaa;
                }
            }
            
            .list {
                    > li {
                        float: left;
                        width: 50%;
                        
                        + li {
                            margin-top: 10px;
                        }
                    }
                }
        }
    }
}