I have a working CSS menu that has served me well for quite awhile, but I am now finding that I need to add a sub-menu to a sub-menu.

This is a horizontal menu, that has a vertical sub-menu.

I would like to add a menu that will slide horizontally to the right of the vertical sub-menu, but have the links in a vertical list.

If someone would be kind enough to give me a push in the right direction it would be appreciated.

-Fred

Navigation.php
Code:
<div id='nav'>

	<ul>
		<li class='has-sub'><a href='index.php'><span>Home</span></a>
			<ul>
				<li><a href="link1.php">Link 1</a></li>
				<li><a href="link2.php">Link 2</a></li>

			</ul>
		</li>
	</ul>
</div>
style.css
Code:
/*------------------------------*/
/*-------- Navigation ---------*/
/*----------------------------*/


#nav
{
	border: 1px solid;
	border-radius: 5px;
	display: block;
	height: 37px;
	padding: 0;
	margin: 0;
	position: fixed;
	top: 0;
	width: 99%;
} 

#nav > ul
{
	list-style: inside none; 
	padding: 0; 
	margin: 0;
} 

#nav > ul > li
{
	display: block;
	float: left;
	list-style: inside none;
	margin: 0;
	padding: 0;
	position: relative;
} 

#nav > ul > li > a
{
	display: block;
	font: bold 13px/100% Arial, Helvetica, sans-serif;
	outline: none;
	position: relative;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.4);
} 

#nav > ul > li:first-child > a
{
	border-radius: 5px 0 0 5px;
} 

#nav > ul > li > a:after
{
	border-right: 1px solid;
	bottom: -1px;
	content: '';
	position: absolute;
	right: -2px;
	top: -1px;
	z-index: 9999;
}

#nav ul li.has-sub:hover > a:after
{
	bottom: 0;
	top: 0;
}

#nav > ul > li.has-sub > a:before
{
	border: 5px solid transparent;
	border-top: 5px solid #fff;
	content: '';
	position: absolute;
	right: 6px;
	top: 18px;
}

#nav > ul > li.has-sub:hover > a:before
{
	top: 19px;
}

#nav ul li.has-sub:hover > a
{
	background: #3f3f3f;
	border-color: #3f3f3f;
	padding-bottom: 13px;
	padding-top: 13px;
	top: -1px;
	z-index: 999;
}

#nav ul li.has-sub:hover > ul,
#nav ul li.has-sub:hover > div
{
	display: block;
}

#nav ul li.has-sub > a:hover
{
	background: #3f3f3f;
	border-color: #3f3f3f;
} 


#nav ul li > ul,
#nav ul li > div
{
	background: #3f3f3f;
	border-radius: 0 0 5px 5px; z-index:999;
	display: none;
	padding: 10px 0;
	position: absolute;
	top: 38px;
	width: auto;
} 

#nav ul li > ul
{
	width: 200px;
}

#nav ul li > ul li
{
	display: block;
	list-style: inside none;
	margin: 0;
	padding: 0;
	position: relative;
}

#nav ul li > ul li a
{
	color: #fff;
	display: block;
	font: 10pt Arial, Helvetica, sans-serif;
	margin: 0;
	outline: none;
	padding: 8px 20px;
	position: relative;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
} 

#nav, #nav > ul > li > ul > li a:hover
{
	background: #3e698c;
	background: linear-gradient(top,  #3e698c 0%,#30576e 100%);
	background: -moz-linear-gradient(top,  #3e698c 0%, #30576e 100%);
	background: -ms-linear-gradient(top, #3e698c 0%,#30576e 100%);
	background: -o-linear-gradient(top, #3e698c 0%,#30576e 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e));
	background: -webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 );
} 

#nav
{
	border-color: #1b313d;
}

#nav > ul > li > a
{
	border-right: 1px solid #1b313d; 
	color: #fff;
}

#nav > ul > li > a:after
{
	border-color: #6696bd;
}


#nav > ul > li > a:hover
{
	background: #436f93;
}