Trion Global navigation

Here is a global navigation I made for Trion Worlds. It was featured across all products. I owned this project for it's beginning.

by Kyle Hand

HTML

<nav id="gnav-2013" class="en" role="navigation">
			<div class="elastic">
			<div class="gnav1 left">
				<ul>
					<li>
						<a class="trion-logo" href="http://trionworlds.com/en/"><h6>Trion Worlds</h6></a>
					</li>
					<li class="games target">
						<a class="target01" href="#">
							<span>Games</span></a>
							<div class="sub sub01">
							<ul>
                                <li><a href="http://defiance.com/en/" class="defi"><img height="35" width="221" src="//webcdn.triongames.com/common/gnav/defiance.png" alt="Defiance"/>Defiance</a></li>
                                <li><a href="http://riftgame.com/en/" class="rift"><img height="121" width="180" src="//webcdn.triongames.com/common/gnav/rift.png" alt="RIFT"/>RIFT</a></li>
                                <li><a href="http://archeagegame.com/en/" class="arch"><img height="175" width="180" src="//webcdn.triongames.com/common/gnav/archeage.png" alt="ArcheAge"/>ArcheAge</a></li>
								<li class="last"><a href="http://www.trovegame.com/" class="trove"><img height="75" width="180" src="//webcdn.triongames.com/common/gnav/trove.png" alt="Trove">Trove</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>

			<div class="gnav2 right account">
				<ul>
					<li class="login-btn"><a href="https://session.trionworlds.com/login?service=http://www.defiance.com/en/game/?CAS_REDIR=true" class="sign-in" title="Sign In">Sign In</a></li>
					<li class="register-btn"><a href="http://www.defiance.com/en/register/#register" class="already-reg">Register</a></li>
                     <li class="support"><a href="https://support.trionworlds.com/app/home/theme/defiance/p/2760/" target="_blank">Support</a></li>
					<li class="target target02 lang2">
					<a href="#" class="language">
						<span>
							English</span></a>
							<ul class="sub sub02">
								<li><a href="http://www.defiance.com/de/spiel/" title="Deutsch">Deutsch</a></li><li><a href="http://www.defiance.com/fr/jeu/"...

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;margin: 0;padding: 0;}

.left{float: left}
.right{float: right}

/* Global Navigation */
#gnav-2013{line-height: 20px;font-family: Tahoma, Geneva, sans-serif, font-size: 13px;height:42px;width:100%;background:#000 url(//cdn.trionworlds.com/common/gnav/corp-nav-bg-line.gif) repeat-x scroll center bottom;display:block;font-family:arial,tahoma,sans-serif;position:relative}
.elastic{max-width:960px;margin:0 auto;overflow:hidden;height:42px}
.sub{display:none;position:absolute;z-index:10000}
.target span{background:url(//cdn.trionworlds.com/common/gnav/sprite.png) right -64px no-repeat;padding-right:15px}
#gnav-2013 a{color:#7d7d7d;text-decoration:none;font-family:tahoma,verdana,arial,sans-serif;text-transform:none;letter-spacing:normal;font-size:.85em}
#gnav-2013 li{list-style-type:none}
#gnav-2013 h6{width:83px;font-size:0}
#gnav-2013 .trion-logo{display:block;width:83px;height:32px;background:url(//cdn.trionworlds.com/common/gnav/sprite.png) left 7px no-repeat;font-size:0;margin-top:4px;margin-right:15px}
#gnav-2013 .gnav1 li{display:inline-block;float:left}
#gnav-2013 .gnav2 li{display:inline;float:left}
#gnav-2013 .target:hover .sub{/*display:block*/}
#gnav-2013 .games{height:42px}
#gnav-2013 span{padding:10px 20px 10px 0}
#gnav-2013 .games a{padding:12px 23px;display:block;-o-transition:0;-ms-transition:0;-moz-transition:0;-webkit-transition:0;transition:0}
#gnav-2013 .games a:hover,#gnav-2013 .gnav2 a:hover{color:#FFF;background-color:#1a1a1a}
#gnav-2013 ul,#gnav-2013 .games ul,#gnav-2013 .gnav2 ul{margin:0;padding:0}
#gnav-2013 .games .sub{border-top:1px solid #232323;min-height:160px;background-color:#1a1a1a;width:100%;margin:0 auto;top:42px;left:0;background:#1a1a1a...

JavaScript

$("#gnav-2013 .games.target").hover(
		function () {
			$("#gnav-2013 .target01").css("backgroundColor", "#1A1A1A");
			$("#gnav-2013 .sub01").fadeIn(250); //over
			},
		function () {
			$("#gnav-2013 .target01").css("backgroundColor", "transparent");
			$("#gnav-2013 .sub01").fadeOut(600);
		}
	); //return to normal	
	$("#gnav-2013 .target02").hover(
		function () {
			$("#gnav-2013 .target02").css("backgroundColor", "#333333");
			$("#gnav-2013 .sub02").fadeIn(250); //over
		},
		function () {
			$("#gnav-2013 .target02").css("backgroundColor", "transparent");
			$("#gnav-2013 .sub02").fadeOut(600);
		}
	); //return to normal