...

View Full Version : Add 3rd level to html/css/js menu



dcparham
07-21-2011, 10:45 PM
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!


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 */
/*##########################*/



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 */
/*##########################*/



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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum