JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<div>
      <div id="navigation">
        <div style="width:750px;" id="align">
          <ul style="visibility: block; margin-bottom: 0;" id="menu">
            <li><a href="index.html">
              <div style="width:100px; text-align:center;">&nbsp;&nbsp;HOME</div>
            </a> </li>
            <li></li>
            <li><a href="history/club_history.html">
              <div style="width:100px; text-align:center">HISTORY</div>
              </a>
              <ul>
                <li><a href="history/club_history.html">Club History</a></li>
                <li><a href="history/original_documents.html">Original Documents</a></li>
                <li><a href="history/virtual_museum.html">Virtual Museum</a></li>
              </ul>
            </li>
            <li></li>
            <li><a href="club/clubhouse.html">
              <div style="width:100px; text-align:center">CLUB</div>
              </a>
              <ul>
                <li><a href="club/clubhouse.html">The Clubhouse</a></li>
                <li><a href="club/facilities.html">Facilities</a></li>
                <li><a href="club/links.html">Links</a></li>
                <li><a href="club/merchandise.html">Club Merchandise</a></li>
                <li><a href="club/noticeboard.html">Noticeboard</a></li>
              </ul>
            </li>
            <li></li>
            <li><a href="course/corbiehill.html">
              <div style="width:100px; text-align:center">COURSE</div>
              </a>
              <ul>
                <li><a href="course/corbiehill.html">The Corbiehill Course - 18 hole</a></li>
                <li><a href="course/rosehill.html">The Rosehill Course - 9 hole</a></li>
                <li><a href="course/corbiehill_gallery.html">Corbiehill Gallery</a></li>
                <li><a href="course/rosehill_gallery.html">Rosehill Gallery</a></li>
              </ul>
            </li>
            <li></li>
            <li><a href="visitors/visitors.html">
             ...

CSS

#navigation {
	margin: 100px auto; 
	text-align: center;
}

#navigation ul ul {
	display: none;
}

	#navigation ul li:hover > ul {
		display: block;
	}


#navigation ul {
	background: url("http://www.fraserburghgolfclub.org/_css/../images/m.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
	list-style: none;
	position: relative;
	display: inline-table;
}
	#navigation ul:after {
		content: ""; clear: both; display: block;
	}

	#navigation ul li {
		float: left;
	}
		#navigation ul li:hover {
		    background-image: url("http://www.fraserburghgolfclub.org/src/img/mo.gif"); 
		}
			#navigation ul li:hover a {
				color: #fff;
			}
		
		#navigation ul li a {
			display: block; 
			color: #fff; text-decoration: none;
		}
			
		
	#navigation ul ul {
		background: #c5e769; border-radius: 0px; padding: 0;
		position: absolute; top: 100%;
	}
		#navigation ul ul li {
			float: none;
            position: relative;
		}
			#navigation ul ul li a {
				color: #333 !important;
                padding:5px;
                text-align:left;
			}	
				#navigation ul ul li a:hover {
					background: #94bd24;
				}
		
	#navigation ul ul ul {
		position: absolute; left: 100%; top:0;
	}