JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<input>Click here first then try and tab down through below menu items without clicking on the purple box with your cursor. How can I achieve this with CSS?</input>
<div tabindex="0">
    Select
    <ul>
        <li><a tabindex="0" href="#">Item 1</a></li>
        <li><a tabindex="0" href="#">Item 2</a></li>
        <li><a tabindex="0" href="#">Item 3</a></li>
    </ul>
</div>

CSS

div { 
    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, div:focus > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li, div:focus > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover, div:focus > ul > li:focus { background: white;}
div:hover > ul > li:hover > a, div:focus > ul > li:focus > a { color: red; }