﻿.vertical_menu_class
{
font-family: arial, sans-serif;
position:relative;
font-size:11px;
margin:0;
padding:0;
border:0;
z-index:100; /*high stacking order*/
}

/* 1st level menu */
.vertical_menu_class ul
{
padding:0;
margin:0;
border:0;
list-style-type: none;
width:120px; /*width of menu*/
}
.vertical_menu_class ul li
{
float:left;
background:#303070 url("../images/MenuImages/GradientHorizRed250x80.png") center left;
border-bottom:1px solid #806080; /*menu divider*/
}

/* 2nd level menu */
.vertical_menu_class ul li ul
{
visibility:hidden;
position:absolute;
left:125px; /* submenu left position from previous menu*/
overflow:hidden;
}

.vertical_menu_class ul li a,
.vertical_menu_class ul li a:visited
{
display:block;
float:left;
text-decoration:none;
color:yellow;
width:120px; /* should be width of 1st level menu minus padding-left */
height:auto;
/* line-height:20px; /* height of menu box */
padding:5px 0px 5px 5px; /*	padding:0.5em 0.7em; /*give text some space around the submenu box*/
}

* html .vertical_menu_class ul li a,
* html .vertical_menu_class ul li a:visited
{width:150px;
w\idth:140px;}

.vertical_menu_class table
{
border-collapse:collapse;
border-bottom:1px solid #806080; /*menu divider*/
margin:0;
padding:0;
font-size:1em;
position:absolute;
}

/* When hovered over main menu */
/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
.vertical_menu_class ul li:hover a,
.vertical_menu_class ul li a:hover
{
background:pink;
color: red;
width:120px; /*width of 1st level menu when hovered over*/
}

.vertical_menu_class ul li:hover {position:relative; z-index:90;}
* html .vertical_menu_class ul li a:hover {position:relative; z-index:100;}

.vertical_menu_class ul li:hover ul,
.vertical_menu_class ul li a:hover ul {
visibility:visible;
position:absolute;
overflow:visible;
}

/* 2nd level flyout submenu when hovered over main menu*/
.vertical_menu_class ul li:hover ul li a,
.vertical_menu_class ul li a:hover ul li a
{
display:block;
background:brown url("../images/MenuImages/GradientHorizRed250x80.png") center left;
color: yellow;
width:145px; /* width of 2nd level submenu minus padding-left */
height:auto;
/* line-height:14px; /* height of submenu */
padding:5px 0 5px 5px;
}

/* 2nd level flyout submenu when hovered over 2nd level (own) menu*/
.vertical_menu_class ul li:hover ul li:hover a,
.vertical_menu_class ul li a:hover ul li a:hover a
{
background:pink;
color: red;
}

/* hide it for 3rd level subsubmenu when hovered over main menu*/
.vertical_menu_class ul li:hover ul li ul,
.vertical_menu_class ul li a:hover ul li a ul
{
visibility:hidden;
position:absolute;
height:0;
overflow:hidden;
left:120px; /* subsubmenu left position from previous submenu*/
}

/* 3rd level flyout subsubmenu when hovered over 2nd level submenu*/
.vertical_menu_class ul li:hover ul li:hover ul,
.vertical_menu_class ul li a:hover ul li a:hover ul
{
visibility:visible;
position:absolute;
height:auto;
color:#000;
padding:0;
/* border-bottom:1px solid #806080; /*menu divider*/
list-style-type:none;
width:120px; /* width of 2nd level submenu */
}

/* 3rd level flyout menu when hovered over 2nd level menu */
.vertical_menu_class ul li:hover ul li:hover ul li a,
.vertical_menu_class ul li a:hover ul li a:hover ul li a
{
display:block; 
background: brown url("../images/MenuImages/GradientHorizRed250x80.png") center left;
color: yellow;
}

/* 3rd level flyout submenu when hovered over 3rd level (own) menu*/
.vertical_menu_class ul li:hover ul li:hover ul li:hover a,
.vertical_menu_class ul li a:hover ul li a:hover ul li a:hover a
{
background:pink;
color: red;
}

.vertical_menu_class li.selected_vertical_menu_class a
{
	background:#a0b0f0 url("../images/MenuImages/GradientHorizRedBrite250x80.png") repeat-x center bottom;
	color: red;	/* HiLite color */
}
