Jump to content

Html Breakout Menu Giving Me Problems In Ie8


bigsilk
 Share

Recommended Posts

I have a two-stage breakout menu - first is an option that says, "What may we show you today?", and on mouseover, it breaks out to a four-item menu. Mouseover a menu item and each of those four menu items have more options. It works fine in Opera, FF, Safari and Chrome... Just not in the most popular browser in the known universe.What it shows is this. (View in IE, then in another browser.)Here's some code:

<div class="mainmenu"><ul> <li class="li_hc"> <a href="/" target="_self" >What may we show you today? » </a> <ul class="ul_ch"> </li> <li class="li_hc"> <a href="#">Color themes? » </a> <ul class="ul_ch"> <li class="li_hc"><a href="#" >Red </a></li> <li class="li_hc"><a href="#" >Blue </a></li> <li class="li_hc"><a href="#" >Green </a></li> <li class="li_hc"><a href="#" >Yellow </a></li> </ul> </li> <li class="li_hc"> <a href="#" target="_self" >Orientation? » </a> <ul class="ul_ch"> <li class="li_hc"><a href="#" >Portrait (Taller than wide) </a></li> <li class="li_hc"><a href="#" >Landscape (Wider than tall) </a></li> </ul> </li> <li class="li_hc"> <a href="#" target="_self" >Sizes? » </a> <ul class="ul_ch"> <li class="li_hc"><a href="#" >Small </a></li> <li class="li_hc"><a href="#" >Medium </a></li> <li class="li_hc"><a href="#" >Large </a></li> <li class="li_hc"><a href="#" >Custom </a></li> </ul> </li> <li class="li_hc"> <a href="#" target="_self" >Subject matter? » </a> <ul class="ul_ch"> <li class="li_hc"><a href="#" >Human </a></li> <li class="li_hc"><a href="#" >Animal </a></li> <li class="li_hc"><a href="#" >Urban </a></li> <li class="li_hc"><a href="#" >Natural </a></li> </ul> </li></ul></div>
Oh, and disregard layout in iframe. Still working on that...Some of you who have helped me on this project may recognize the page. :)
Link to comment
Share on other sites

You have mismatching tags here

<ul><!-- Open UL1 --><li class="li_hc"><!-- Open LI1 --><a href="/" target="_self" >What may we show you today? » </a><ul class="ul_ch"><!-- Open UL2 --></li><!-- Close LI1 --><li class="li_hc"><!-- Open LI2 --><a href="#">Color themes? » </a><ul class="ul_ch"><!-- Open UL3 -->

It's no wonder that the browser is confused as to what to do.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...