JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Learning html5/css3/jquery -->
<!DOCTYPE HTML> 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mainStyle.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script src="/showHide.js"></script>
</head>
<body>
    <div id="header">
        <ul>List1
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
        <ul>List 2
            <li><a href="#">Item 1</a></li>
        </ul>
        <ul>List3
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
        </ul>
        <ul>List 4
            <li><a href="#">Item 1</a></li>
        </ul>
    </div>
</body>

CSS

body 
{
    background-color:#ffffff;
}


#header {
    position: fixed;
    top: 100px;
    left: 0;
    width: 195px;
    bottom: 100px;
    max-height: 1000px;
    z-index: 10;
    border-right: 2px solid #000000;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

#header ul {
    color:#000000;
    font: 18px;
    padding-right: 10px;
    text-align: right;
    list-style: none;
}
#header ul li {
    display: none;
    font-size: 14px;
    color: #000000;
    padding-top: 5px;
}
#header ul li a {
    font-size: 14px;
    color:#000000;
    text-align: right;
}
#header ul li a:hover {
    color: #000000;
}
#header ul li.current_page_item a {
    color: #000000;
}

JavaScript

$(document).ready(function() { 
  $("#header ul").hover(
  function() { $(this).children("#header li").fadeIn(); }/*,
  function() { $(this).children("#header li").fadeOut(); }*/
);
});