JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div>Gallery 1</div>
<div class="main_menu">
    <ul>
        <li><a href="#" class="shop">shop</a>
            <!--gallery hover-->
            <div class="gallery">
                <div class="item1">
                    <img src="images/item_1.png" width="166" height="129" class="item_1" alt="*" />
                    <div class="description"> <span>Artwork</span>

                    </div>
                </div>
                <div class="item2">
                    <img src="images/item_2.png" width="166" height="129" class="item_1" alt="*" />
                    <div class="description"> <span>Bedding</span>

                    </div>
                </div>
            </div>
        </li>
        <li><a href="#">collections </a>

        </li>
        <li><a href="#">gifts</a>

        </li>
        <li><a href="#">moodboard</a>

        </li>
        <li><a href="#">blog</a>

        </li>
    </ul>
</div>

<div>Gallery 2</div>
<div class="main_menu2">
    <ul>
        <li><a href="#" class="shop">shop</a>
            <!--gallery hover-->
            <div class="gallery">
                <div class="item1">
                    <img src="images/item_1.png" width="166" height="129" class="item_1" alt="*" />
                    <div class="description"> <span>Artwork</span>

                    </div>
                </div>
                <div class="item2">
                    <img src="images/item_2.png" width="166" height="129" class="item_1" alt="*" />
                    <div class="description"> <span>Bedding</span>

                    </div>
                </div>
            </div>
        </li>
        <li><a href="#">collections </a>

        </li>
        <li><a href="#">gifts</a>

        </li>
        <li><a href="#">moodboard</a>

        </li>
        <li><a href="#">blog</a>

        </li>
    </ul>
</div>

<!--gallery hover-->
<div class="gallery2">
    <div class="item1">
        <img src="images/item_1.png" width="166" height="129"...

CSS

.main_menu ul {
   position: relative;
}
.gallery {
    position:absolute;
    top: 0px;
    left:80px;
    background-color: #f4f4f4;
    width: 980px;
    min-height: 300px;
    z-index: 3;
    padding: 20px 10px 20px 10px;
    display: none;
}
.main_menu ul li:hover .gallery {
    display: block;
}

.main_menu2:hover + .gallery2 {
    display: block;
}

.gallery2 {
    position:relative;
    left:0px;
    background-color: #f4f4f4;
    width: 980px;
    min-height: 300px;
    z-index: 3;
    padding: 20px 10px 20px 10px;
    display: none;
}