JSFiddle - React, Tailwind, and code Playground

HTML

<h2 style="clear:both;">Menu 6 (clean up)</h2>
<nav class="menu-6">
    <ul>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li style="float:none; clear:both;"></li>
    </ul>
</nav>

CSS

nav.menu-6 ul{
    list-style:none;
}

nav.menu-6 > ul{
    background-color: yellow;
}

nav.menu-6 a{
    text-decoration: none;
}

nav.menu-6 > ul > li{
    float:left;
    padding-right: 100px;
    display: relative;
}

nav.menu-6 > ul > li > a{
    position: relative;
    display: block;
    z-index: 2;
}
nav.menu-6 > ul > li a { position:relative;}
nav.menu-6 > ul > li a:after { position:absolute; content:""; width:100%; height:1px; left:0; bottom:-2px; opacity:0; z-index:9999; background:#fff;}
nav.menu-6 > ul > li:hover a:after { opacity:1;}

nav.menu-6 > ul > li:hover > a{
    border: solid #000 1px;
    border-bottom: solid #fff 1px;     /* overwrite the sub menu top border */ 
}   

nav.menu-6 ul li > ul{
    display: none;
   
    border: solid #000 1px;
    z-index: 1;
}

nav.menu-6 > ul > li:hover ul{
    display:block;
}