JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
<ul>
<li><a href="http://www.promotional-table-cloths.co.uk/shop/">Store</a>
<ul id="submenu">
<li><a href="#">Table cloths</a></li>
<li><a href="#">Table cloths</a></li>
<li><a href="#">Table cloths</a></li>
<li><a href="#">Table cloths</a></li>
<li><a href="#">Table cloths</a></li>
 </ul>
    </li>
<li><a href="http://www.promotional-table-cloths.co.uk/shop/checkout/">Checkout</a></li>
<li><a href="http://www.promotional-table-cloths.co.uk/shop/cart/">Cart</a></li>
</ul></div>

CSS

#navigation #submenu{
    display:none;
}
#navigation li:hover #submenu{
    display:block;
}

#navigation #submenu li a {
display: block;
margin: 10px;
border: 0 none;
list-style:none;
padding-top:1px;
 
}

#navigation #submenu  li a:hover {
display: block;
margin: 0px;
border: 0 none
left:0;
}

#navigation
{
	float: left;
	width: 950px;
	background-color: #D91F5C;
	padding-left:2px;
	
}
#navigation a {
    background: none repeat scroll 0 0;
    color: #FFFFFF;
    display: block;
    padding: 5px;
    text-decoration: none;
}
#navigation { display: block;}
#navigation ul
{
	margin: 0;
	padding: 0;
    list-style: none outside none;
}

#navigation li a
{
	display: block;
	 font-family: "ChunkFiveRegular", Arial, Helvetica, sans-serif;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
	
}

#navigation ul, #navigation ul ul {
    margin: 0;
    padding: 0;
}
#navigation, #navigation ul {
    min-height: 0;
}

#navigation li:hover ul{ 
}
#navigation li a:hover {
	-webkit-transition:color 1s ease-in-out;
	-o-transition:color 1s ease-in-out;
	-moz-transition:color 1s ease-in-out;
	transition:color 1s ease-in-out;
	text-decoration: none;
	color: #CF0;
}