/*
	Flyout menu

	<ul role="navigation" class="flyout">
		<li><a href="#">About Us</a></li>
		<li><a href="#">Portofolio</a></li>
		<li><a href="#">Articles<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
		   <ul>
		      <li><a href="#">Category 1<!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
		         <ul>
		            <li><a href="#">Article 1</a></li>
		            <li><a href="#">Article 2</a></li>
		            <li><a href="#">Article 3</a></li>
		            <li><a href="#">Article 4</a></li>
		            <li><a href="#">Article 5</a></li>
		            <li><a href="#">Article 6</a></li>
		         </ul>   
		      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
		      </li>
		      <li><a href="#">Category 2</a></li>
		      <li><a href="#">Category 3</a></li>
		   </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="#">Contact</a></li>
	</ul>
*/
 
ul.flyout {
	zoom: 1; /*IE<=6*/
}

ul.flyout ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 50;
}

ul.flyout ul ul { 
	position: absolute;
	left: 100%;
	top: -2px;
}

ul.flyout LI:hover>ul, ul.flyout a:hover ul /*IE<=6*/ {
	display: block;
}

ul.flyout li:hover, ul.flyout li a:hover /*IE<=6*/ {
	position: relative;
}

* html ul.flyout table {border-collapse: collapse;} /*IE<=6*/