JSFiddle - React, Tailwind, and code Playground

by VivekNadar

HTML

// using decendant selector
<ul class="nav">
    <li>a</li>
    <li>b
        <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
    </li>
    <li>c</li>
</ul>
//using child combinator selector
<ul class="cselctor">
    <li>a</li>
    <li>b
        <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
    </li>
    <li>c</li>
</ul>

CSS

ul.nav{
       width:500px;
        overflow:visible;
}
/*this one applies into whole li elements which cames under ul.nav*/
ul.nav li{
    background:#f8f8f8;
    line-height:30px;
    list-style:none;
    margin-bottom:5px;
    position:relative;
}

ul.nav li ul{
    position:absolute;
    top:0px;
    right:0;
    width:100px;
    z-index:5;
}

ul.cselctor{
    margin-top:50px;
   
}
ul.cselctor > li{
       background:#f00;
    line-height:30px;
    list-style:none;
    margin-bottom:5px;
    position:relative;
}
ul.cselctor > li ul{
    position:absolute;
    top:0px;
    right:0;
    width:100px;
    z-index:5;
}