JSFiddle - React, Tailwind, and code Playground

by SM ADnan

HTML

<div class="menu-bar"></div>
<div class="menu-items">
    <div class="menu">
        File
        <div class="sub-menu">
            <div class="item">Save</div>
            <div class="item">Load</div>
            <div class="item">Print</div>
            <div class="item">Exit</div>
        </div>
    </div>
    <div class="menu">
        Edit
        <div class="sub-menu">
            <div class="item">Cut</div>
            <div class="item">Copy</div>
            <div class="item">Paste</div>
        </div>
    </div>
    <div class="menu">
        View
        <div class="sub-menu">
            <div class="item">Full screen</div>
            <div class="item">Zoom in</div>
            <div class="item">Zoom out</div>
        </div>
    </div>
</div>

<div class="menu-placeholder"></div>

Content starts here.

<p>
    This is other content
</p>

CSS

* {font-family: Arial;}
.menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .2);
    width: 100%;
    height: 40px;
    z-index: 0;
}

.menu-items {
    width: 100%;
    position: absolute;
    top: 2px;
}

.menu {
    color: #444;
    display: inline-block;
    padding: 9px;
    z-index: 10;
}

.menu:hover {
    background-color: rgba(0,0,0,.3);
    cursor: pointer;
    color: white;
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

.menu:hover .sub-menu {
    display: block;
    animation: fade-in .2s ease-out;
    
}

.sub-menu {
    position: absolute;
    top: 36px;
    padding-top: 5px;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    clear: both;
    transform: translate(-10px, 0);
    line-height: 1.6em;
    color: #444;
    box-shadow: 1px 1px 2px rgba(0,0,0,.3);
    min-width: 80px;
}

.item {
    padding: 2px 20px;
}

.item:hover {
    background-color: rgba(0,0,0,.1);
}

.menu-placeholder {
    width: 100%;
    height: 40px;
    overflow: hidden;
}