Horizontal Link drop downs falling under content CSS

[nighthq]

I'm currently working on creating my first wordpress theme and I'm having trouble with the horizontal drop down. When hovering, the drop downs appear below the content. http://pennyjarrdesigns.com/assets/problem1.jpg (screenshot)I've tried using z-index and adjusting relative and absolute positioning and nothing seems to work. Adding absolute to the main div around the navigation produces this:http://pennyjarrdesigns.com/assets/problem2.jpg (screenshot)The drop downs are now visible but it breaks the layout.Here is the html/php:\[code\]<div class="container"><div class="row"> <div class="twelvecol last" id="nav"> <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?> </div></div>\[/code\]CSS:\[code\]#nav{background: #4b4261;margin-bottom: 2%;color: #f4e1c8; }.nav{width:100%;background: #4b4261;display:block;float:left;position:relative;}.nav ul{list-style:none;}.nav li{display:inline-block;position:relative;}.nav a{display:block;text-decoration:none;color:#f4e1c8;padding:0 15px 10px 0;font-size: 1.2em; font-weight:bold;}.nav ul ul{display:none;position: absolute;left:0;top: 100%;float:left;z-index:99999;background: #c1c5cc;}.nav ul ul ul{top: 30%;left:100%;background: #dfe1e8;}.nav ul ul a{height:auto;line-height:1em;padding:10px;width:130px;}.nav li:hover > a,.nav ul ul:hover > a{color:#fff;}.nav ul li:hover > ul{display:block; }\[/code\]grid css:\[code\].container {padding-left: 20px;padding-right: 20px;}.row {width: 100%;max-width: 1140px;min-width: 755px;margin: 0 auto;overflow: hidden;}.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {margin-right: 3.8%;float: left;min-height: 1px;}\[/code\]I really feel like I'm overlooking something simple here. Any ideas? Thanks!