JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Name</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">some kind of sentence</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Name 2</a>
        <ul>
            <li><a href="#"></a></li>
            <li class="slogan1"><a href="#">some kind of sentence</a></li>
        </ul>
    </li>
</ul>

CSS

ul li ul{
    display: none;
}

ul li:hover ul{
    display: block;
}

ul li:first-child ul {
    display:block;
}

ul li:hover ul li a{
    background: #009EE3;
    height:10px;
}

ul li:hover ul li.slogan1 a {
    background: #009EE3;
    height:45px;
    width:958px;
    position:absolute;
    left:0px;
    padding-top:5px;
    line-height:130%;
}