Horizontal Nav With Horizontal Subnav Flyout Menu (and Vertical 3rd menu). Playground: http://cssdeck.com/labs/ggf1qhv6

horizontalNav.htm

<nav>
		<ul>
				<li>
						<a href="#">item 1</a>
								<ul>
										<li>
												<a href="#">item 1.1</a>
                      <ul>
                        <li><a href="#">item 1.1.1</a></li>
                        <li><a href="#">item 1.1.2</a></li>
                      </ul>
										</li>

										<li>
												<a href="#">item 1.2</a>
										</li>

										<li>
												<a href="#">item 1.3</a>
                      <ul>
                        <li><a href="#">item 1.3.1</a></li>
                        <li><a href="#">item 1.3.2</a></li>
                        <li><a href="#">item 1.3.3</a></li>
                        <li><a href="#">item 1.3.4</a></li>
                      </ul>
										</li>
								</ul>
				</li>

				<li>
						<a href="#">item 2</a>
								<ul>
										<li>
												<a href="#">item 2.1</a>
										</li>

										<li>
												<a href="#">item 2.2</a>
										</li>
								</ul>
				</li>
				<li>
						<a href="#">item 3</a>
								<ul>
										<li>
												<a href="#">item 3.1</a>
										</li>

										<li>
												<a href="#">item 3.2</a>
                      <ul>
                        <li><a href="#">item 3.2.1</a></li>
                        <li><a href="#">item 3.2.2</a></li>
                        <li><a href="#">item 3.2.3</a></li>
                        <li><a href="#">item 3.2.4</a></li>
                      </ul>
										</li>
								</ul>
				</li>
				<li>
						<a href="#">item 4</a>
								<ul>
										<li>
												<a href="#">item 4.1</a>
										</li>

										<li>
												<a href="#">item 4.2</a>
										</li>

										<li>
												<a href="#">item 4.3</a>
										</li>
								</ul>
				</li>
		</ul>
</nav>

nav.css

html, body, div, ul, li, a, nav {margin: 0; padding: 0; border: 0;}
body {
	background-color: #fff;
	font-family: sans-serif;
}
a {
	color: blue;
}
a:hover, a.current {
	color: black;
	text-decoration: none;
}

nav {
	background-color: #b9b9b9;
	position: relative;
	width: 100%;
	margin-bottom: 2em;
}

nav ul {
	list-style: none;
	width: 100%;
}

nav ul li {
	display: inline-block;
}

nav ul li a {
	display: block;
	padding: 0.25em 1em;
}

nav > ul {
	margin: 0 auto;
	width: 100%;
}

nav ul li ul { 
	background-color: #dce6ef;
	width: 100%;
	position: absolute;
	left: -9999px;
}

nav ul li ul {
	margin: 0 auto;
	width: 100%;
}
nav > ul > li:hover > a, nav > ul > li.current_page_item > a.current {  
	background-color: #dce6ef;
}

nav > ul > li:hover > ul, nav > ul > li.current_page_item > ul { 
	left: 0;
}

/* 3rd level */
nav ul li ul li:hover ul {
  position:absolute;
  left:auto;
  top:auto;
  width:auto;
  clear:both;
  display:block;
}
nav ul li ul li ul li {
  clear:both;
  display:block;
  min-width:150px;
}