IE- Dropdown menu not functioning

I am working on an new site www.foothillsdrivingschool.ca
There seems to be a problem with IE and the menu writer CSS

The sub drop down menu doesnt allow for you to run your mouse down or over the drop down before it disappears or it only drops down some or doesnt show the rest of the drop down.

I have gone through the forum looking for the solution and have not yet found one that would corrected the current problem.

The link you provide goes to a server not found error.


Usually, that issue occurs if you do not set a width or height for the menu items.


For the menu to be compatible with IE, the menu items will need to have a width and height specified in pixels.

Sorry my typo! Try this as the site is live:

www.foothillsdrivereducation.ca

I have set the width and height

ul#cssmw {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.current > ul {
position: absolute;
}
ul#cssmw > li {
background-image: none;
}
ul#cssmw > li > a {
background-image: url("../cssmw_images/menu_bg.png");
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 20px;
margin: 0 1px 1px 0;
padding: 5px 5px 5px 8px;
text-align: left;
text-decoration: none;
text-transform: none;
width: 236px;
}
ul#cssmw > li:hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw > li.hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw > li.current > a.current {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}
ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a {
background-image: url("../cssmw_images/menu_bg.png");
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 20px;
margin: 0 1px 1px 0;
padding: 5px 5px 5px 8px;
text-align: left;
text-decoration: none;
text-transform: none;
width: 236px;
}
ul#cssmw ul.level-1 > li:hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-1 > li.hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-1 > li.current > a.current {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}
ul#cssmw ul.level-2 {
left: 250px;
}
ul#cssmw ul.level-2 > li {
background-image: none;
}
ul#cssmw ul.level-2 > li > a {
background-image: url("../cssmw_images/menu_bg.png");
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
height: 20px;
line-height: 20px;
margin: 0 1px 1px 0;
padding: 5px 5px 5px 8px;
text-align: left;
text-decoration: none;
text-transform: none;
width: 236px;
}
ul#cssmw ul.level-2 > li:hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-2 > li.hover > a {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

ul#cssmw ul.level-2 > li.current > a.current {
background-image: url("../cssmw_images/menu_bg_sel.png");
background-repeat: no-repeat;
color: #fff;
}

You will need to remove the gaps between the drop-down menu items.

In your cssmw/menu.css file, in the rule for ul#cssmw ul.level-1 > li > a (about line 99), remove the 1px bottom-margin:


ul#cssmw ul.level-1 > li > a {
background-image:url("../cssmw_images/menu_bg.png");
background-repeat:no-repeat;
color:#FFFFFF;
display:block;
font-family:"Trebuchet MS",Geneva,Arial,Helvetica,sans-serif;
font-size:15px;
font-style:normal;
font-weight:normal;
height:20px;
line-height:16px;
margin:0 1px 0 0; /* changed from 0 1px 1px 0 */
padding:5px 5px 5px 8px;
text-align:left;
text-decoration:none;
text-transform:none;
width:236px;
}

thanks for jumping in Neilo, I was about to post the exact same thing.....

Thank you both so much for your help, That seems to have corrected the IE dropdown display problem- Will keep that little trick in mind if I run into that again.

glad to hear it is working.

My menu works in Firefox, but when I launch it in IE 7, the Level Two items disappear as soon as you attempt to hover the mouse over them.

ul#cssmw {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}
ul#cssmw > li {
background-image: url("../cssmw_images/left.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw > li > span {
background-image: url("../cssmw_images/right.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw > li > span > a {
background-image: url("../cssmw_images/center.jpg");
background-repeat: repeat-x;
color: #fff;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: auto;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
ul#cssmw > li:hover {
background-image: url("../cssmw_images/left_hover.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw > li:hover > span {
background-image: url("../cssmw_images/right_hover.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw > li:hover > span > a {
background-image: url("../cssmw_images/center_hover.jpg");
background-repeat: repeat-x;
}
ul#cssmw ul.level-1 {
left: 0px;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a {
background-color: #fff;
background-image: none;
border-bottom: solid 1px #BABDC2;
border-left: solid 1px #BABDC2;
border-right: solid 1px #BABDC2;
color: #2D2B2E;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
ul#cssmw ul.level-1 > li > a:active {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-1 > li:hover > a {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-2 {
left: 112px;
}
ul#cssmw ul.level-2 > li {
background-image: none;
}
ul#cssmw ul.level-2 > li > a {
background-color: #fff;
background-image: none;
border-bottom: solid 1px #BABDC2;
border-left: solid 1px #BABDC2;
border-right: solid 1px #BABDC2;
color: #2D2B2E;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
}
ul#cssmw ul.level-2 > li > a:active {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}
ul#cssmw ul.level-2 > li:hover > a {
background-color: #D8DCBF;
color: #2D2B2E;
text-decoration: none;
}

you have the width for the second level menu items set to auto.

For the menu to function correctly in IE, you need to specify a pixel based width and height attribute for the menu items.

Thanks!!!!!!