Sub-sub Menus do not display in IE8

  • I am using a twenty-eleven child theme with a three level menu. When I visit the site in IE8, the top level menu displays properly, the sub-pages (in the dropdown) display properly, but the sub-sub page (or grandchild page, if you prefer) menu (which would normally appear to the right of the sub-page menu) does not display at all.

    As typical with this sort of problem, the menu displays perfectly in Safari, Chrome, Firefox, Opera, etc. I do not have access to an IE9 machine, and so cannot confirm its functionality there.

    Any ideas would be appreciated. Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter zergling81

    (@zergling81)

    An update to the above: It appears that analogous menus display normally in IE8 in vanilla twentyeleven, so it is probably something that I’ve done in the child theme that is causing the problem. Here is the relevant css from the child:

    #access div {
	margin: 0 0 0 47px;
}

#access {
	background: #fff; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#fff, #fff);
	background: -o-linear-gradient(#fff, #fff);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff)); /* older webkit syntax */
	background: -webkit-linear-gradient(#fff, #fff);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px;
	clear: both;
	float:none;
	text-align:center;
	margin: 0 auto 0;
	width: 950px;
	text-transform:uppercase;
	font-weight:bold;
	display:block;
}
#access ul {
	font-size: 10px;
	list-style: none;
	margin: 0 0 0 0;
	padding-left: 0;
}
#access li {
	float:left;
	position: relative;
}
#access a {
	color: #5288a9;
	display: block;
	line-height: 3.333em;
	padding: 0 13px;
	font-weight:900;
	text-decoration: none;
}
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.9);
	display: none;
	float: none;
	margin: 0 0 0 19px;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 169px;
	z-index: 99999;
	border-left:0px solid #5288a9;
}

#access ul ul ul {
	background: rgba(255,255,255,0.9);
	left: 100%;
	top: 0;
	border-left:2px solid #5288a9;
	margin-left:0px;
}

#ie8 #access ul ul, #ie8 #access ul ul ul {-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";}

#access ul ul a {
	text-align:left;
	background: transparent;
	border-bottom: 1px dotted #ddd;
	color: #5288a9;
	font-size: 10px;
	font-weight: bold;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px 10px 6px;
	width: 153px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #fff;
}
#access li:hover > a,
#access a:focus {
	background: #fff; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#fff, #fff);
	background: -o-linear-gradient(#fff, #fff);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#fff)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#fff, #fff);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold; color:#f88721;
}

    I was using a child theme and had a similar problem. Opacity was causing the problem for me, and I read somewhere a shadow can cause similar problems. Maybe removing shadow and gradient would help.
    My sub-sub menus work again when I comment out this filter line.

    #access ul ul
{
	/* filter: alpha(opacity=96); kills ie8's sub-sub menus */
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sub-sub Menus do not display in IE8’ is closed to new replies.