CSS: Submenu not working in IE 7,8 & 9

HTML & CSS
1

I created sub menus on a website but when I mouse over the parent link, the sub menus are displayed horizontally instead of vertically. They work fine in Chrome and Firefox.

Here’s the HTML code for the menu

<div class="suckertreemenu">
                <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About Us</a>
                    <ul>
                      <li><a href="#"> Overview</a></li>
                      <li><a href="#"> What do we deliver? </a></li>
                      <li><a href="#"> Our People</a>
                        <ul>
                          <li><a href="#"> Management</a></li>
                          <li><a href="#"> Consultants</a></li>
                        </ul>
                      </li>
                      <li><a href="#">What is it like working with us?</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Solutions</a>
                    <ul>
                      <li><a href="#">Business Model</a>
                        <ul>
                          <li><a href="#">Business Consulting</a></li>
                          <li><a href="#">Technology Consulting</a></li>
                          <li><a href="#"> Managed Services Consulting</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Modus Operandi</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Industries</a></li>
                  <li><a href="#">Alliances</a></li>
                  <li><a href="#">News</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </div>

Here’s my CSS code below


@charset "utf-8";
/* CSS Document */
Body{
	margin:0;
	padding:0;
	background-color:#DCDCDC;
	color:#000;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size:12px;*/
	
}
.bodytext{
    font-size:12px;
}
H1{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#000000;
background-image:url(../images/welc_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
P{
 font-size:12px;
}
h3{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#000000;
border-bottom:#FF0000 solid 1px;
padding:5px 5px 5px 5px;
}
.btext{
 font-size:12px;
}
H2 a:link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:active{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color: #FF0000;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
.ik img {
	background: #ebebeb;
	border: solid 1px #d1d1d1;
	padding: 5px;
}
#nav{
	
	background-image: url(../images_v2/bg_grad_02.gif);
}
li{
list-style-image: url(../images/bullet2.gif);
font-size:12px;
list-height:30px;
}
.ContactUS
{
	
	color: #FFF;
}
.footer
{
	font-size:11px;
	color: #000;
}
.businessText {
	font-size: 12px;font-size:12px;
	color: #FFF;
	font-weight:bold
}

.searchText {
	font-size: 12px;
	color: grey;
}
.partners {
	text-align: center;
	color:#000;
	font-size: 12px;
}

.Block_Headers {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #D9D9D9;
}


.searchBox{
background:url(../images_v2/tboxfill.gif)
}

.suckertreemenu ul{
margin: 0;
padding: 2px 0 0 0;
float: left;
font: 14px Arial;
text-align:left;
height:29px;
z-index:100;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;

/*background-color: #F3F3F3;*/ /*overall menu background color*/
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
background:url(../images_v2/navsplit.gif) no-repeat scroll right center transparent;/*Place right border image here*/
font: 14px Arial;
}
.suckertreemenu ul li a:link{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;

}
.suckertreemenu ul li a:visited{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;

}
.suckertreemenu ul li a:active{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid white;
background-color: #BD0021;
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
	left: 0;
	position: absolute;
	top: 1em; /* no need to change, as true value set by script */
	display: block;
	visibility: hidden;
	font: normal 13px Arial;
	
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
	display: list-item;
	list-style:none;
	float: left;
top: 14px;

}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
	left: 159px; /* no need to change, as true value set by script */
	top: -16px;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
	display: block;
	width: 160px; /*width of sub menu levels*/
	text-decoration: none;
	background-color: #31458C;
	color: white;
	/*font-weight:normal;*/
	padding: 10px 11px;
	border-top: 1px solid white;
	border-right: 1px solid ;
	border-left: 1px solid ;
	background:none;
	
}
.suckertreemenu ul li ul li a:link{
	display: block;
	width: 160px; /*width of sub menu levels*/
	text-decoration: none;
	background-color: #31458C;
	color: white;
	/*font-weight:normal;*/
	padding: 5px 11px;
	border-top: 1px solid white;
	border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:visited{
	display: block;
	width: 160px; /*width of sub menu levels*/
	text-decoration: none;
	background-color: #31458C;
	color: white;
	/*font-weight:normal;*/
	padding: 5px 11px;
	border-top: 1px solid white;
	border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:active{
	display: block;
	width: 160px; /*width of sub menu levels*/
	text-decoration: none;
	background-color: #31458C;
	color: white;
	/*font-weight:normal;*/
	padding: 5px 11px;
	border-top: 1px solid white;
	border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:hover{
	background-color: #BD0021;
	color: white;
	border-bottom: none;
	/*font-weight:normal;*/

}

#current{
	border-bottom:#AA0B34 solid 3px;
	color: white;
	
}


.suckertreemenu ul li a:hover{
	
	color: red;
}

.suckertreemenu ul li a:active{
border-bottom:#BD0021 solid 3px;
color: white;
/*font-weight:normal;*/

}


/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #31458C url(../images_v2/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \\*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
 /* Holly Hack for IE \\*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; }
* html .suckertreemenu ul li ul li a { height: 1%; }
/* End */
/* End */

See image below

2

Hi,

That code doesn’t seem to display the result you are showing (besides the fact that there is no support for it to work with css anyway).

I would guess that the nested floated lists need clearing so that they stack vertically.
e.g.


.suckertreemenu ul li ul li{clear:left}

I also assume you have a full doctype etc.:slight_smile:

3

This mess here:


/* Holly Hack for IE \\*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
 /* Holly Hack for IE \\*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; }
* html .suckertreemenu ul li ul li a { height: 1%; }

Is a pretty good indication that something is HORRIBLY wrong with how that’s built, but without seeing it live in an actual page it’s hard for me to say what… I don’t see a state-change on the hover effects… so IE could be sticking open or closed depending on the screen positioning – and in general I suspect your menu code is WAY too complex for it’s own good… Though that goes hand in hand with the ‘suckertreemenu’ “div for no reason”, incomplete font declarations, z-index that should be unnecessary (though without seeing the rest of the page content that’s a guess) and redundant being assigned over and over and over again for NOTHING. (see every one of your :psuedo’s on those anchors)

Of course I see NOTHING to make this actually work as a flyout menu in the first place so I’m assuming that you are using javascript to do CSS’ Job?

The px assignment commented out on BODY and the class after also raises warning flags – since you should NEVER declare content areas in px, and setting it that early neuters ANY chance of building an accessible page…

4

Thank you very much Paul O’B. This solved the issue