JSFiddle - React, Tailwind, and code Playground

by ggChris

HTML

<hbox style="text-align: center; font-size: 95%; font-weight:600;">
    <div class="nav1" title="Major Religions around the World">Major Religions &nbsp;<i class="fa fa-caret-down" style="font-size:15px;"></i></div>
</hbox>
<div id="religions">
    <div class="rel_main">
      <ul>
        <li><font size="5.4">Major</font></li>
        <br>
        <li><a href="#"><font color="black">Christanarty</font></a></li>
        <li><a href="#"><font color="black">Islam</font></a></li>
        <li><a href="#"><font color="black">Hinduism</font></a></li>
        <li><a href="#"><font color="black">Chinese Folk Religion</font></a></li>
      </ul>
    </div>
</div>

CSS

ul {
        list-style-type: none;
      }

.nav1 {
    display: block;
    background-color: #00AEFF;
    color: #FFF;
    position: fixed;
    top: 0px;
    left: 100px;
    height: 30px;
    padding-top: 10px;
    box-shadow: 10px 1px 10px #888;
    line-height: 1.6;
    transition: background-color 0.3s ease 0s !important;
    width: 140px;
    font-family: arial;
}
#religions {
        background-color: #F1F1F1;
        color: black;
        height: 350px;
        width: 1129px;
        line-height: 1.5;
        display: none;
        position: absolute;
        top: 60px;
        left: 0px;
        z-index: -1;
      }
 .rel_main {
        background-color: #F1F1F1;
        display: block;
        position: absolute;
        left: 10px;
        top: 10px;
        height: 300px;
        width: 200px;
        padding: 0px;
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        margin-left: -25px;
        color: black;
      }

JavaScript

$(document).ready(function () {
		
    	$(".nav1").hover(
  			function () {
     			$('#religions').slideDown('medium');
  			},
			 
  			function () {
     			$('#religions').slideUp('medium');
  			}
		);

	});