JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<center>
         
<div>
<a href="#">Select</a>
    <ul id="the-one">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
            
            
            
            
            </center>

CSS

div { 
    cursor: pointer;
    margin: 10px;
    padding: 10px; 
    border: 2px solid purple; 
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f; }
div:hover > ul > li:hover { background: white; }
div:hover > ul > li:hover > a { color: red; }

 ul#the-one {list-style-type: none;}

 li {width: 190px; margin-left: -40px;}
            
/* unvisited link */
a:link { text-decoration: none;
    color: black;
    font-family: sans-serif;
}