JSFiddle - React, Tailwind, and code Playground

by rabelais

HTML

<ul id="nav">
	<li>
		<a id="lfw-link" href="london-fashion-week.html">
			Live at London Fashion Week
		</a>
		<nav id="lfw-nav">
			<a href="london-fashion-week.html">
				SEE ALL
			</a>
			<a href="lcm-menswear.html">
				Menswear Fashion Week (LCM)
			</a>
			<a href="vivienne-westwood-2013.html">
				Vivienne Westwood 2013
			</a>
			<a href="paul-smith.html">
				Paul smith
			</a>
			<a href="house-of-holland.html">
				House of Holland
			</a>
			<a href="roksanda.html">
				Roksanda
			</a>
			<a href="julien-mcdonald.html">
				Julien Mcdonald
			</a>
			<a href="vivienne-westwood-2012.html">
				Vivienne Westwood 2012
			</a>
			<a href="2012-lfw.html">
				London Fashion Week 2012
			</a>
		</nav>
		</div>
	</li>
	<li>
		<a id="clients-link" href="clients.html">
			Clients / Press
		</a>
		<nav id="clients-nav">
			<a href="clients.html">
				SEE ALL
			</a>
			<a href="">
				Edward Sharpe and the magnetic zeros
			</a>
			<a href="tank-magazine.html">
				Tank Magazine
			</a>
			<a href="volt-magazine.html">
				Volt Magazine
			</a>
			<a href="poplin.html">
				Poplin
			</a>
			<a href="dash-magazine.html">
				Dash Magazine
			</a>
			<a href="tank-o-magazine.html">
				O Tank Magazine
			</a>
			<a href="grit-magazine.html">
				Grit Magazine
			</a>
			<a href="gieves-and-hawkes.html">
				Gieves and Hawkes
			</a>
		</nav>
</li></ul>


<div class="content">
    <img width="122" src="http://intelligen.info/images/home page images/img022 copy.jpg" alt="Head in the Clouds"/>
</div>

CSS

body {
    background-color: gray;
}
#nav {
    opacity: 0;
}
#nav li
    {
        display: inline;
        list-style: none;
        padding-right:78px;
        position:relative;
    }
    #nav li nav
    {
        display: none;
        position: absolute;
        padding-top: 10px;
    }
    #nav li:hover nav
    {
        display: block;
    }
    #nav nav a {
        display:block
    }
    #nav nav a:hover {
        color: gray;
    }
.content {
    text-align: center;
    margin-top: 40px;
}
}

JavaScript

$('#nav').hover(function() {
    $('#nav').fadeTo(1,1);
},function() {
    $('#nav').fadeTo(1,0);
});
    $("#nav").hover(
      function () {
        $(".content").fadeTo(1,0.5);
      },
      function () {
        $(".content").fadeTo(0.5,1);
      }
    );