troubleshooting Question

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

Avatar of kmurphychi
kmurphychi asked on
CSSHTML
4 Comments1 Solution551 ViewsLast Modified:
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
{
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros