another post asks the same question, but the menu code is very different. my menu already has a vertical list of menu items, when mouseover then sublevel1 pops out to the right. i need one of those items to go a 3rd level. ex: the main items says Attorneys & Staff>goes to 3 items in a submenu1 vertical list, the first of which is Attorneys. i want to be able to then mouse over the Attorneys then popping out to the right is the alphabet, A-Z, each letter showing mouseover, each attorney last name under the alphabet of his/her last name. the main site is w w w . c s h l a w . c o m. Please have a look! you'll see the menu on the left of each page. the code consists of the menu code [mainMenu2.inc], the example2b.css file, and the page showing everything, attorneys2.asp. Can someone please take a look and offer a suggestion? thanks mucho in advance!

Code:
mainMenu2.inc
.ddm1 {
	padding-right: 0px;
}
.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
    padding: 2px 0px 2px 0px;
	margin: 5px 0px 5px 0px; 
    border: 0;
    border-style: solid solid none solid;
    text-decoration: none;
    display: block;
    position: relative;
	text-align: center;
}

.ddm1 .item1 {
    background: #c0a484;
    color: #222222;
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover,
.item1-current {
    background: #e5dacc !important;
    color: #c41230 !important;
}
.ddm1 .item2,
.ddm1 .item2:hover {
    padding: 3px 28px 4px 8px;/*normally padding: 3px 28px 4px 8px;*/
    text-decoration: none;
    display: block;
    white-space: nowrap;
    font: 11px tahoma;
	border-bottom: 1px dotted #ffffff ("width", "-300px");/*this added the dotted lines in IE atty bio page*/
}
.ddm1 .item2 {
    color: #ffffff;
}
.item2 + .item2 {/*normally this says .item2 + .item2*/
	border-top: 1px dotted #ffffff;
}
.ddm1 .item2:hover {
    background: #e79daa;
    color: #393641;
}

.ddm1 .item2b:hover {
    background: #e79daa;
    color: #393641;
	float:left;
}

/*##################################*/
/*##################################*/
.ddm1 .section {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
}

.ddm1 .section2b {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
	float:left;
}
.ddm1 .bottom,
.ddm1 .bottom:hover { border-style: solid solid solid solid; }

* html .ddm1 td { position: relative; } /* ie 5.0 fix */

/*####### for item2b #######*/
.ddm2 {
	padding-right: 0px;
}
.ddm2 .item1,
.ddm2 .item1:hover,
.ddm2 .item1-active,
.ddm2 .item1-active:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
    padding: 2px 0px 2px 0px;
	margin: 5px 0px 5px 0px; 
    border: 0;
    border-style: solid solid none solid;
    text-decoration: none;
    display: block;
    position: relative;
	text-align: center;
}

.ddm2 .item1 {
    background: #c0a484;
    color: #222222;
}
.ddm2 .item1:hover,
.ddm2 .item1-active,
.ddm2 .item1-active:hover,
.item1-current {
    background: #e5dacc !important;
    color: #c41230 !important;
}
.ddm2 .item2,
.ddm2 .item2:hover {
    padding: 3px 28px 4px 8px;/*normally padding: 3px 28px 4px 8px;*/
    text-decoration: none;
    display: block;
    white-space: nowrap;
    font: 11px tahoma;
	border-bottom: 1px dotted #ffffff ("width", "-300px");/*this added the dotted lines in IE atty bio page*/
}
.ddm2 .item2 {
    color: #ffffff;
}
.item2 + .item2 {/*normally this says .item2 + .item2*/
	border-top: 1px dotted #ffffff;
}
.ddm2 .item2:hover {
    background: #e79daa;
    color: #393641;
}

.ddm2 .item2b:hover {
    background: #e79daa;
    color: #393641;
	float:left;
}

.ddm2 .section {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
}

.ddm2 .section2b {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
	float:left;
}
.ddm2 .bottom,
.ddm2 .bottom:hover { border-style: solid solid solid solid; }

* html .ddm2 td { position: relative; } /* ie 5.0 fix */
/*##########################*/
Code:
example2b.css
.ddm1 {
	padding-right: 0px;
}
.ddm1 .item1,
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
    padding: 2px 0px 2px 0px;
	margin: 5px 0px 5px 0px; 
    border: 0;
    border-style: solid solid none solid;
    text-decoration: none;
    display: block;
    position: relative;
	text-align: center;
}

.ddm1 .item1 {
    background: #c0a484;
    color: #222222;
}
.ddm1 .item1:hover,
.ddm1 .item1-active,
.ddm1 .item1-active:hover,
.item1-current {
    background: #e5dacc !important;
    color: #c41230 !important;
}
.ddm1 .item2,
.ddm1 .item2:hover {
    padding: 3px 28px 4px 8px;/*normally padding: 3px 28px 4px 8px;*/
    text-decoration: none;
    display: block;
    white-space: nowrap;
    font: 11px tahoma;
	border-bottom: 1px dotted #ffffff ("width", "-300px");/*this added the dotted lines in IE atty bio page*/
}
.ddm1 .item2 {
    color: #ffffff;
}
.item2 + .item2 {/*normally this says .item2 + .item2*/
	border-top: 1px dotted #ffffff;
}
.ddm1 .item2:hover {
    background: #e79daa;
    color: #393641;
}

.ddm1 .item2b:hover {
    background: #e79daa;
    color: #393641;
	float:left;
}

/*##################################*/
/*##################################*/
.ddm1 .section {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
}

.ddm1 .section2b {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
	float:left;
}
.ddm1 .bottom,
.ddm1 .bottom:hover { border-style: solid solid solid solid; }

* html .ddm1 td { position: relative; } /* ie 5.0 fix */

/*####### for item2b #######*/
.ddm2 {
	padding-right: 0px;
}
.ddm2 .item1,
.ddm2 .item1:hover,
.ddm2 .item1-active,
.ddm2 .item1-active:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
    padding: 2px 0px 2px 0px;
	margin: 5px 0px 5px 0px; 
    border: 0;
    border-style: solid solid none solid;
    text-decoration: none;
    display: block;
    position: relative;
	text-align: center;
}

.ddm2 .item1 {
    background: #c0a484;
    color: #222222;
}
.ddm2 .item1:hover,
.ddm2 .item1-active,
.ddm2 .item1-active:hover,
.item1-current {
    background: #e5dacc !important;
    color: #c41230 !important;
}
.ddm2 .item2,
.ddm2 .item2:hover {
    padding: 3px 28px 4px 8px;/*normally padding: 3px 28px 4px 8px;*/
    text-decoration: none;
    display: block;
    white-space: nowrap;
    font: 11px tahoma;
	border-bottom: 1px dotted #ffffff ("width", "-300px");/*this added the dotted lines in IE atty bio page*/
}
.ddm2 .item2 {
    color: #ffffff;
}
.item2 + .item2 {/*normally this says .item2 + .item2*/
	border-top: 1px dotted #ffffff;
}
.ddm2 .item2:hover {
    background: #e79daa;
    color: #393641;
}

.ddm2 .item2b:hover {
    background: #e79daa;
    color: #393641;
	float:left;
}

.ddm2 .section {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
}

.ddm2 .section2b {
    border: 0px;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    background: #c41230;
	float:left;
}
.ddm2 .bottom,
.ddm2 .bottom:hover { border-style: solid solid solid solid; }

* html .ddm2 td { position: relative; } /* ie 5.0 fix */
/*##########################*/
Code:
 attorneys2.asp:
this page introduces the menu code like this:
<!--#####################-->            
<!--#include FILE="includes/mainMenu2.inc" -->
<!--#####################-->
I would REALLY appreciate anyone's efforts! Deadline approaching at work soon!! Thank you!