JSFiddle - React, Tailwind, and code Playground

by nndd

HTML

<div id="aaa">Hover over me!</div>
<div id="ukryty">
    <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
        <li>link 7</li>
    </ul>
    <div id="close">Zamknij <b>X</b></div>
</div>
<div id="1">tekst teda ad asdkst
    <p>tedd dda asdaa ad a dsddddd as dadasdddasdsa kst</p>teksasdsad as ddda da dd asdsadasdads s</div>

CSS

#ukryty {
    display: block;
    background-color: rgba(15, 15, 15, 0.95);
    border: 1px solid #DDDDDD;
    position:fixed;
    right:-100%;
    top:0;
    height:100%;
    width:100%;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); 
}

#close {
    display:block;
    position:fixed;
    top:1%;
    right:-100%;
    font-size:3em;
    color: #FF0000;
    
}

#aaa:hover + #ukryty {
    right:0;
}


#ukryty:hover {
    right:0;
}

#aaa:hover + #close {
    position:absolute;
    right:0;
}