CSS Problem with dropdown menu going behind content in Firefox and Safari

kmurphychi
kmurphychi used Ask the Experts™
on
Oddly enough my website works well with with internet explorer, but in Safari and Firefox for mac the subnav for the certification page falls behind the page content.  I've checked the z-index's and it looks like they are right so I am stumped.  Any help would be great!!  The link to see the dropdowns is here.  http://aciillinois.com/certification
.artmenu A, .artmenu A:link, .artmenu A:visited, .artmenu A:hover
{
	text-align: left;
	text-decoration: none;
	outline: none;
	letter-spacing: normal;
	word-spacing: normal;
}
.artmenu, .artmenu UL
{
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}
.active-trail .active
{
}
A
{
}
.active-trail
{
}
LI
{
}
.leaf.first
{
}
.artmenu LI
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
	z-index: 5;
	background: none;
}
.artmenu LI:hover
{
	z-index: 10000;
	white-space: normal;
}
.artmenu LI LI
{
	float: none;
}
.artmenu UL
{
	position: absolute;
	z-index: 100000;
	left: 0;
	top: 0;
	background: none;
	visibility: hidden;
}
.artmenu LI:hover>UL
{
	visibility: visible;
	top: 100%;
	z-index: 10000;
}
.artmenu LI LI:hover>UL
{
	top: 0;
	left: 100%;
}
.artmenu:after, .artmenu UL:after
{
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.artmenu, .artmenu UL
{
	min-height: 0;
}
.artmenu UL
{
	padding: 10px 30px 30px;
	margin: -10px 0 0 -30px;
}
.artmenu UL UL
{
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}
/*menu structure*/
.artmenu
{
	padding: 6px;
}
DIV.nav .artmenu
{
}
UL.artmenu
{
}
.nav
{
}
.nav
{
	height: 52px;
	z-index: 100;
	background-image: url(images/navbg.png);
	background-repeat: no-repeat;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	width: 1019px;
	margin-left: 15px;
}
.nav .l, .nav .r
{
	position: absolute;
	z-index: -1;
	top: 0;
	height: 52px;
}
.nav
{
}
.nav .l
{
	left: 0;
	right: 0px;
}
.nav .r
{
	right: 0;
	width: 870px;
	clip: rect(auto, auto, auto, 870px);
}
/*end Menubegin MenuItem*/
.artmenu UL LI
{
	clear: both;
}
.artmenu A
{
	position: relative;
	display: block;
	overflow: hidden;
	height: 30px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 2px;
	margin-left: 2px;
}
.artmenu A .r, .artmenu A .l
{
	position: absolute;
	display: block;
	height: 90px;
}
.artmenu A .l
{
	left: 0;
	right: 4px;
}
.artmenu A .r
{
	width: 408px;
	right: 0;
	clip: rect(auto, auto, auto, 404px);
}
.artmenu A .t
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 16px;
	color: #B1C5DD;
	padding: 0px 19px 0;
	margin: 0px 4px 0;
	line-height: 30px;
	text-align: center;
}
.artmenu, LI
{
	padding-top: 10px;
}
.artmenu A:hover .l, .artmenu A:hover .r
{
	top: -30px;
}
.artmenu LI:hover>A .l, .artmenu LI:hover>A .r
{
	top: -30px;
}
.artmenu LI:hover A .l, .artmenu LI:hover A .r
{
	top: -30px;
}
.artmenu A:hover .t
{
	color: #EEF5F7;
}
.artmenu LI:hover A .t
{
	color: #ECEDED;
}
.artmenu LI:hover>A .t
{
	color: #EEF5F7;
}
.artmenu A.active .l, .artmenu A.active .r
{
	top: -60px;
}
.artmenu A.active .t
{
	color: #EFEFEF;
}
/*end MenuItembegin MenuSeparator*/
.nav .separator
{
	display: block;
	width: 1px;
	height: 30px;
	background-image: url('images/MenuSeparator.png');
}
/*end MenuSeparatorbegin MenuSubItem*/
.artmenu UL A
{
	display: block;
	text-align: center;
	white-space: nowrap;
	height: 30px;
	width: 280px;
	overflow: hidden;
	line-height: 30px;
	margin-right: auto;
	background-image: url('images/subitem-bg.png');
	background-position: left top;
	background-repeat: repeat-x;
	border-width: 0px;
	border-style: solid;
}
.nav UL.artmenu UL SPAN, .nav UL.artmenu UL SPAN SPAN
{
	display: inline;
	float: none;
	margin: inherit;
	padding: inherit;
	background-image: none;
	text-align: inherit;
	text-decoration: inherit;
}
.artmenu UL A, .artmenu UL A:link, .artmenu UL A:visited, .artmenu UL A:hover, .artmenu UL A:active, .nav UL.artmenu UL SPAN, .nav UL.artmenu UL SPAN SPAN
{
	text-align: left;
	text-indent: 12px;
	text-decoration: none;
	line-height: 30px;
	color: #DED6D6;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 13px;
}
.artmenu UL UL A
{
	margin-left: auto;
}
.artmenu UL LI A:hover
{
	color: #DED6D6;
}
.artmenu UL LI:hover>A
{
	color: #DED6D6;
}
.nav .artmenu UL LI A:hover SPAN, .nav .artmenu UL LI A:hover SPAN SPAN
{
	color: #F3F0F0;
}
.nav .artmenu UL LI:hover>A SPAN, .nav .artmenu UL LI:hover>A SPAN SPAN
{
	color: #FFFFFF;
}
/*end MenuSubItem*/
.nav
{

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
I see the problem in Chrome as well. Give your nav a zIndex of something higher than 0
.nav {
height: 52px;
z-index: 100;
background-image: url(images/navbg.png);
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
z-index: 1000;
width: 1019px;
margin-left: 15px;
}

Open in new window

Author

Commented:
Just tried that but it doesn't seem to be working.
Commented:
I still see .nav with a z-index of zero on the website. Changing it works in Firebug.

Author

Commented:
Thank you so much!!  Lack of sleep has made me a little dense working on this thing.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial