JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<div id="info">

<h2>Professional - Dropline with current page override - centered</h2>
<h3>30th March 2010</h3>
<div id="droplineMenu">
<ul id="menuOuter">
	<li class="lv1-li">
	<!--[if lte IE 6]><a class="lv1-a" href="#url"><table><tr><td><![endif]-->
		<ul>
			<li><a href="#url"><b>HOME</b></a></li>
			<li><a href="#url"><b>PRODUCTS</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div><b></b>
				<ul>
					<li><a href="#url">Cameras</a></li>
					<li><a href="#url">Lenses</a></li>
					<li><a href="#url">Flashguns</a></li>
					<li><a href="#url">Tripods</a></li>
					<li><a href="#url">Filters</a></li>
					<li><a class="last" href="#url">Lens Adaptors</a></li>
				</ul>
			</div>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li class="current"><a href="#url"><b>SERVICES</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div><b></b>
				<ul>
					<li><a href="#url">Printing</a></li>
					<li><a href="#url">Servicing</a></li>
					<li class="current_sub"><a href="#url">Repair</a></li>
					<li><a href="#url">Photo Editing</a></li>
					<li><a class="last" href="#url">Photo Framing</a></li>
				</ul>
			</div>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#url"><b>SHOP</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div><b></b>
				<ul>
					<li><a href="#url">Online Shopping</a></li>
					<li><a href="#url">Mail Order</a></li>
					<li><a href="#url">Store Finder</a></li>
					<li><a class="last" href="#url">Second Hand &amp; Refurbished Offers</a></li>
				</ul>
			</div>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#url"><b>SPECIAL DEALS</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<div><b></b>
				<ul class="right">
					<li><a...

CSS

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dropline-current-override.html
Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#photo {display:block; margin:0 auto;}

#droplineMenu {height:66px; position:relative; background-color:#b0c4de; text-align:center; width:960px; margin:0 auto; z-index:100; }
#droplineMenu ul {padding:0; margin:0; list-style:none; }
#droplineMenu table {border-collapse:collapse; width:0; height:0; margin-top:-1px; margin-bottom:-1px; }
#droplineMenu ul ul li {float:left; }
#droplineMenu ul ul li a {display:block; float:left; }
#droplineMenu ul ul div {position:absolute; left:-9999px; overflow:hidden; }

#droplineMenu ul#menuOuter {display:inline-block; } 
#droplineMenu ul#menuOuter li.lv1-li {display:inline-block; height:66px; }

#droplineMenu ul ul li a {height:66px; line-height:66px; padding:0 20px 0 0; font-size:14px; font-family: tahoma, sans-serif; color:#fff; text-decoration:none; text-transform:uppercase; }
#droplineMenu ul ul li a b {display:block; height:66px; float:left; padding:0 0 0 20px; font-weight:normal; cursor:pointer; }
#droplineMenu ul ul li a:hover {background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li a:hover b {color:#fc0; background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li div{background-color:#00ffff;}
#droplineMenu ul ul li:hover > a {background-color:#00ffff; line-height:60px; }
#droplineMenu ul ul li:hover > a b {color:#fc0; background-color:#00ffff; line-height:60px; }

#droplineMenu ul ul li.current a {background:url(tab.gif) right top; line-height:60px;}
#droplineMenu ul ul li.current a b...