Posted: Fri 23. Jun 2006, 00:56
oops. I will check that now. In the meantime, my CSS file looks like this:
I know it's that I just don't seem to know where to put my background images for the dropdown L2 sub-menus and where to put the background for the OnHover state of these L2 submenus. If you can point me in the right direction, I would be so grateful. My attempts have had limited success where it seems only viewable in either IE or FireFox & Netscape, but now cross-browser.
My dhtmlmenu.css is as follows:
#primaryNav {
/* margin: 0px 0px 0px 0px; */
background-color:#FFFFFF;
background-image: url(../../../images/nav_bkg.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 80%;
height: 32px;
padding: 0;
margin: 0;
}
/* here we set the default display for the lists/nested lists */
#primaryNav ul { /*LB - display for top list*/
margin: 0;
padding: .6em 0 0 0;
list-style-type: none;
float: right;
}
#primaryNav ul ul { /*LB - display for nested list*/
display: none;
position: absolute;
width: 192px;
/*border-bottom: 1px solid #ccc; */
top: 25px; /*LB- controls how far down the dropdown submenu starts from the L1 heading*/
left: 0px;
}
/*Paul Start--------------------------------------------------------------------------------*/
/*#primaryNav ul ul li a.submenu {
background-image: url(../../../picture/arrowWhite.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
} */
/*Paul End--------------------------------------------------------------------------------*/
/*Hendrik Start---------------------------------------------------------------------*/
/*#primaryNav #alias {
}
#primaryNav #alias li{
}
#primaryNav .itemOn {
font-weight: bold;
color: blue;
}
#primaryNav .itemOnFirst {
font-weight: bold;
color: blue;
background-image: url(../../../picture/d_arrow.gif);
background-repeat: no-repeat;
background-position: 98% .5em;
padding-right: .6em;
}
#primaryNav .itemOnFirst ul{
font-style: normal;
}
#primaryNav .itemChoosen {
font-weight: bold;
color: #fff;
background: #555;
}
#primaryNav .itemChoosenFirst {
font-weight: bold;
color: #123;
}
#primaryNav .itemChoosen ul{
font-variant: normal;
}
#primaryNav .itemChoosenFirst ul{
font-variant: normal;
} */
/*Hendrik End---------------------------------------------------------------------*/
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul { top: 25px; left: 0px; width: 170px;} /*LB- controls how far down the dropdown submenu starts from the L1 heading*/
/* End */
#primaryNav ul ul ul {
display: none;
position: absolute;
left: 190px;
top: -1px;
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul ul { left: 170px; top: -1px; }
/* End */
/* here we set the default display for the list items/nested list items */
#primaryNav ul li { /*LB - positioning controls WHERE the dropdown menus will be placed on the screen, ie under L1 heading, bkg is the li bullet in original state.*/
margin: 0px;
padding: 4px 0px;
float: left;
position: relative;
font-weight: bold;
background-image:url(../../../images/li_bullet.gif);
background-repeat:no-repeat;
background-position: 0 50%;
text-decoration: none;
}
#primaryNav ul li li { /*LB- controls the actual LOOK/APPEARANCE of the L2 dropdown menu items*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* border: 1px solid #ccc; */
border-bottom: 0px;
float: none;
display: block;
font-weight: normal;
background-image: none; /*removes li bullet image in IE*/
}
/* here we set the default display state for the links */
#primaryNav ul li a { /*LB - controls how the L1 navigation links look/appear - top horizontally*/
padding: 5px 20px 5px 5px;
display: inline;
text-decoration: none;
padding: 0 15px 0 15px;
color: #005f8c;/*LB text color for L1 top/horizontal nav for IE*/
display: inline;/*LB added*/
}
#primaryNav ul li li a { /*L2 navigation*/
padding: 5px 10px 5px 10px; /*LB - controls the padding size of the dropdown box*/
display: block;
width: 170px;
background-image: none;/*LB - takes the li bkg image away on the nested dropdown menu items*/
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul li { float: left; height: 1%; }
* html #primaryNav ul li a { height: 1%; }
/* End */
/* here we set the ACTIVE class for ON menus, first for cascade */
#primaryNav ul.itemOff { color: #005f8c; /*color: #FF3300; */}
/* DEFINE DEFAULT LI/A APPEARANCE */
/* here we set the standard LI states - controls bg color */
#primaryNav ul li { background-color: transparent; /*color: #666666;*/ } /*L1* main nav*/
#primaryNav ul li li { background-color: transparent; color: #777; } /*L2 first submenu*/
#primaryNav ul li li li { background-color: #ffffff; color: #777; } /*L3 third submenu*/
#primaryNav ul li li li li { background-color: #f9f9f9; color: #777; } /*L4 fourth submenu*/
/* here we set the standard A states - controls text color */
#primaryNav ul li a { color: inherit; }
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul li a { /*color: #666666; */}
* html #primaryNav ul li li a { color: #777; }
/* End */
/* DEFINE DEFAULT LI/A HOVER/ON APPEARANCE */
/* here we set the hover and "in" styles for elements */
/* L1 on states */ /*LB- adds on hover red dot bkg to level 1 main nav*/
#primaryNav li:hover, #primaryNav li.sfhover a { color: #cd363d; background: url(../../../images/li_bullet_hvr.gif) 0 50% no-repeat; }
/* L1 off states - for children */ /*LB-removes OnHover red dot bkg fromlevel 2 dropdown menus*/
#primaryNav li:hover li, #primaryNav li.sfhover li a { color: #005f8c; background-image:none; }
/* L2 on states */
#primaryNav li li:hover, #primaryNav li li.sfhover a { color: #FF3300; }
/* L2 off states - for children */
#primaryNav li li:hover li, #primaryNav li li.sfhover li a { color: #777; }
/* global states - bg colors */
#primaryNav li li:hover, #primaryNav li li.sfhover, #primaryNav li li li:hover, #primaryNav li li li.sfhover {
}
/* DEFINE MENU APPEARANCE BEHAVIORS */
/* here we set the reveal/hide chains for the fly-out */
#primaryNav li:hover ul ul, #primaryNav li:hover ul ul ul {
display: none;
}
#primaryNav li:hover ul, #primaryNav li li:hover ul, #primaryNav li li li:hover ul {
display: block;
}
#primaryNav li.sfhover ul ul, #primaryNav li.sfhover ul ul ul, #primaryNav li li.sfhover ul ul {
display: none;
}
#primaryNav li.sfhover ul, #primaryNav li.sfhover ul, #primaryNav li li.sfhover ul, #primaryNav li li li.sfhover ul {
display: block;
}
LBurgess17
I know it's that I just don't seem to know where to put my background images for the dropdown L2 sub-menus and where to put the background for the OnHover state of these L2 submenus. If you can point me in the right direction, I would be so grateful. My attempts have had limited success where it seems only viewable in either IE or FireFox & Netscape, but now cross-browser.
My dhtmlmenu.css is as follows:
#primaryNav {
/* margin: 0px 0px 0px 0px; */
background-color:#FFFFFF;
background-image: url(../../../images/nav_bkg.gif);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 80%;
height: 32px;
padding: 0;
margin: 0;
}
/* here we set the default display for the lists/nested lists */
#primaryNav ul { /*LB - display for top list*/
margin: 0;
padding: .6em 0 0 0;
list-style-type: none;
float: right;
}
#primaryNav ul ul { /*LB - display for nested list*/
display: none;
position: absolute;
width: 192px;
/*border-bottom: 1px solid #ccc; */
top: 25px; /*LB- controls how far down the dropdown submenu starts from the L1 heading*/
left: 0px;
}
/*Paul Start--------------------------------------------------------------------------------*/
/*#primaryNav ul ul li a.submenu {
background-image: url(../../../picture/arrowWhite.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
} */
/*Paul End--------------------------------------------------------------------------------*/
/*Hendrik Start---------------------------------------------------------------------*/
/*#primaryNav #alias {
}
#primaryNav #alias li{
}
#primaryNav .itemOn {
font-weight: bold;
color: blue;
}
#primaryNav .itemOnFirst {
font-weight: bold;
color: blue;
background-image: url(../../../picture/d_arrow.gif);
background-repeat: no-repeat;
background-position: 98% .5em;
padding-right: .6em;
}
#primaryNav .itemOnFirst ul{
font-style: normal;
}
#primaryNav .itemChoosen {
font-weight: bold;
color: #fff;
background: #555;
}
#primaryNav .itemChoosenFirst {
font-weight: bold;
color: #123;
}
#primaryNav .itemChoosen ul{
font-variant: normal;
}
#primaryNav .itemChoosenFirst ul{
font-variant: normal;
} */
/*Hendrik End---------------------------------------------------------------------*/
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul { top: 25px; left: 0px; width: 170px;} /*LB- controls how far down the dropdown submenu starts from the L1 heading*/
/* End */
#primaryNav ul ul ul {
display: none;
position: absolute;
left: 190px;
top: -1px;
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul ul ul { left: 170px; top: -1px; }
/* End */
/* here we set the default display for the list items/nested list items */
#primaryNav ul li { /*LB - positioning controls WHERE the dropdown menus will be placed on the screen, ie under L1 heading, bkg is the li bullet in original state.*/
margin: 0px;
padding: 4px 0px;
float: left;
position: relative;
font-weight: bold;
background-image:url(../../../images/li_bullet.gif);
background-repeat:no-repeat;
background-position: 0 50%;
text-decoration: none;
}
#primaryNav ul li li { /*LB- controls the actual LOOK/APPEARANCE of the L2 dropdown menu items*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* border: 1px solid #ccc; */
border-bottom: 0px;
float: none;
display: block;
font-weight: normal;
background-image: none; /*removes li bullet image in IE*/
}
/* here we set the default display state for the links */
#primaryNav ul li a { /*LB - controls how the L1 navigation links look/appear - top horizontally*/
padding: 5px 20px 5px 5px;
display: inline;
text-decoration: none;
padding: 0 15px 0 15px;
color: #005f8c;/*LB text color for L1 top/horizontal nav for IE*/
display: inline;/*LB added*/
}
#primaryNav ul li li a { /*L2 navigation*/
padding: 5px 10px 5px 10px; /*LB - controls the padding size of the dropdown box*/
display: block;
width: 170px;
background-image: none;/*LB - takes the li bkg image away on the nested dropdown menu items*/
}
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul li { float: left; height: 1%; }
* html #primaryNav ul li a { height: 1%; }
/* End */
/* here we set the ACTIVE class for ON menus, first for cascade */
#primaryNav ul.itemOff { color: #005f8c; /*color: #FF3300; */}
/* DEFINE DEFAULT LI/A APPEARANCE */
/* here we set the standard LI states - controls bg color */
#primaryNav ul li { background-color: transparent; /*color: #666666;*/ } /*L1* main nav*/
#primaryNav ul li li { background-color: transparent; color: #777; } /*L2 first submenu*/
#primaryNav ul li li li { background-color: #ffffff; color: #777; } /*L3 third submenu*/
#primaryNav ul li li li li { background-color: #f9f9f9; color: #777; } /*L4 fourth submenu*/
/* here we set the standard A states - controls text color */
#primaryNav ul li a { color: inherit; }
/* Fix IE. Hide from IE Mac \*/
* html #primaryNav ul li a { /*color: #666666; */}
* html #primaryNav ul li li a { color: #777; }
/* End */
/* DEFINE DEFAULT LI/A HOVER/ON APPEARANCE */
/* here we set the hover and "in" styles for elements */
/* L1 on states */ /*LB- adds on hover red dot bkg to level 1 main nav*/
#primaryNav li:hover, #primaryNav li.sfhover a { color: #cd363d; background: url(../../../images/li_bullet_hvr.gif) 0 50% no-repeat; }
/* L1 off states - for children */ /*LB-removes OnHover red dot bkg fromlevel 2 dropdown menus*/
#primaryNav li:hover li, #primaryNav li.sfhover li a { color: #005f8c; background-image:none; }
/* L2 on states */
#primaryNav li li:hover, #primaryNav li li.sfhover a { color: #FF3300; }
/* L2 off states - for children */
#primaryNav li li:hover li, #primaryNav li li.sfhover li a { color: #777; }
/* global states - bg colors */
#primaryNav li li:hover, #primaryNav li li.sfhover, #primaryNav li li li:hover, #primaryNav li li li.sfhover {
}
/* DEFINE MENU APPEARANCE BEHAVIORS */
/* here we set the reveal/hide chains for the fly-out */
#primaryNav li:hover ul ul, #primaryNav li:hover ul ul ul {
display: none;
}
#primaryNav li:hover ul, #primaryNav li li:hover ul, #primaryNav li li li:hover ul {
display: block;
}
#primaryNav li.sfhover ul ul, #primaryNav li.sfhover ul ul ul, #primaryNav li li.sfhover ul ul {
display: none;
}
#primaryNav li.sfhover ul, #primaryNav li.sfhover ul, #primaryNav li li.sfhover ul, #primaryNav li li li.sfhover ul {
display: block;
}
LBurgess17