/**********************************************************
 *  
 *  File		:   topnavmenu.css
 *  
 *  Description	:  css for TopNavMenu UserControl(UserControls\TopNavMenu.ascx) 
 *                 
 *  Author		:       Guysung Kim
 *
 *  Copyright 2008, Vertical Symmetry, All rights reserved
 *  
 ***********************************************************/
/* Begin CSS Popout Menu */

#topNavMenu{
width:100%;
float:left;
font-size: 12px;
}

#topNavMenu a{
font:bold 87%/205% Arial,Helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
/*white-space:nowrap;*/
line-height: 1.5;
margin:0;
padding:0 5px;
}
/*
#topNavMenu h2{
*/
#topNavMenu a.topmenu {
font:bold 85%/205% Times New Roman,Helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
/*white-space:nowrap;*/
line-height: 1.5;
text-align: center;
word-spacing: 3px;
margin:0;
padding: 0px 5px 0px 5px;
height: 3.2em;
text-transform:uppercase;
}

#topNavMenu a{
background:#eee;
text-decoration:none;
}

#topNavMenu a, #topNavMenu a:visited{
/*color:#000;*/
}

#topNavMenu a.topmenu:hover{
/*color:#a00;*/
/*background:#ddd;*/
font-weight: bolder;
background:#369;
}

#topNavMenu a:hover{
background:#369;
}

#topNavMenu a.topmenu:active{
color:#010265;
background:#ccc;
}

#topNavMenu a:active{
color:#010265;
background:#ccc;
}

#topNavMenu ul{
list-style:none;
margin:0;
padding:0;
float:left;
/*width:10.8em;*/
width:130px;
}

#topNavMenu li{
position:relative;
vertical-align: middle;
}

#topNavMenu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}

#topNavMenu ul ul ul{
top:0;
left:100%;
}

/* Begin non-anchor hover selectors */

/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */

div#topNavMenu li:hover{
cursor:pointer;
z-index:100;
}

#topNavMenu li:hover ul ul,
#topNavMenu li li:hover ul ul,
#topNavMenu li li li:hover ul ul,
#topNavMenu li li li li:hover ul ul
{display:none;}

#topNavMenu li:hover ul,
#topNavMenu li li:hover ul,
#topNavMenu li li li:hover ul,
#topNavMenu li li li li:hover ul
{display:block;}

/* End of non-anchor hover selectors */

/* Styling for Expand */

#topNavMenu a.x, #topNavMenu a.x:visited{
font-weight:normal;
color:#fff;
background:#8CADC5;
}

#topNavMenu a.x:hover{
color:#fff;
background:#369;
}

#topNavMenu a.x:active{
color:#060;
background:#ccc;
}
/* End CSS Popout Menu */

#topNavMenu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#topNavMenu ul li a {
color:#ffffff;
background-color: #8CADC5;
}
#topNavMenu ul > li > ul > li > ul > li {
width:125%;
}

<!--[if lte IE 6]>
/* get rid of the table */
#topNavMenu ul td,#topNavMenu ul tr, #topNavMenu ul table {margin:0;padding:0;}
#topNavMenu ul table {
	position:absolute; 
	border-collapse:collapse;
	top:0; 
	left:0; 
	z-index:500;
}
/*This is needed to trigger IE to show the sub levels */
* html #topNavMenu ul li a {
height: 1%; /* make links honour display: block; properly */
color:#ffffff;
background-color: #8CADC5;
}
* html #topNavMenu ul li a:hover {
position:relative; 
background:#369; 
color:#ffffff;
}
*html #topNavMenu ul li {
z-index:500;
}
* html #topNavMenu ul li ul {
visibility:hidden; 
display:block; 
position:absolute; 
top:0px;
left:0px;
width:100%
}
#topNavMenu ul li a:hover ul ul, #topNavMenu ul li a:hover ul a:hover ul ul{
visibility:hidden;
}
#topNavMenu ul li a:hover ul {
visibility:visible; 
left:0; 
top:33px;
width:129px;
text-align:left;
font:bold Arial,Helvetica,sans-serif;
font-size: 10px;
}
#topNavMenu ul li a:hover ul a:hover ul, #topNavMenu ul li a:hover ul a:hover ul a:hover ul{ 
visibility:visible; 
top:0px;
left:128px;
width:175px;
text-align:left;
}
#topNavMenu iframe {
position:absolute;  
left:-9999px; 
top:-9999px; 
width:0; height:0; margin:0; padding:0; 
list-style:none;
background-color: transparent;
filter: alpha(opacity=0);
}
#topNavMenu li a:hover iframe {
left:0; 
top:33px; 
width:129px; 
height:90px;
z-index:10;
position:absolute;
}
#topNavMenu li a:hover iframe.sub {
left:0; 
top:0px; 
width:176px; 
height:100px;
background-color: transparent;
filter: alpha(opacity=0);
position:absolute;
z-index:-1;
}
<![endif]-->