JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://beta.evancool.com/includes/styles.css">
<div id="container">
<!--[if lt IE 7]><div style='clear:both; height:42px; padding:0; position: relative;'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]--> <div id="header">
<div class="heading">
<div style="float:left; width:650px;">
<a href="#" title="Home Page"><img class="logo" src="http://beta.evancool.com/images/mod-eclogo.png" width="220" height="37" /></a>
<div id='tabs2'>
<ul class="cssmenu">
<li class="gaming"><a class="gaming" href="#tabs-1" title="Video Games"><span class="displace">Gaming</span></a></li>
<li class="anime"><a class="anime" href="#tabs-2" title="Japanese Animation"><span class="displace">Anime</span></a></li>
<li class="infotech"><a class="infotech" href="#tabs-3" title="Information Technology"><span class="displace">Infotech</span></a></li>
<li class="blog"><a class="blog" href="#tabs-4" title="Da Blog"><span class="displace">Blog</span></a></li>
</ul>
<div id="tabs-1" class='tab'>
<p>testing testing 1</p>
</div>
<div id="tabs-2" class='tab'>
<p>testing testing 2</p>
</div>
<div id="tabs-3" class='tab'>
<p>testing testing 3</p>
</div>
<div id="tabs-4" class='tab'>
...
CSS
.ui-tabs-hide {
display: none;
}
.tab {
background: #1d2632;
color: white;
border:1px solid #344154;
height: 333px;
width:996px;
position: absolute;
top: 55px;
left:50%;
margin-left: -498px;
}
JavaScript
$(function() {
$("#tabs2").mouseleave(function() {
SetupTabs();
});
$("#tabs2 ul li").mouseenter(function() {
SetupTabs();
});
SetupTabs();
});
function SetupTabs() {
$("#tabs2").tabs({
collapsible: true,
selected: -1
});
}