CSS Drop down not working in IE6
-
I have a drop down menu on a website that I’m working on at:
http://www.themortgagesalesblog.com/home/The drop down effect doesn’t seem to be working on IE6, but it does work on IE7.
Here’s what my CSS looks like:
/* Root = Horizontal, Secondary = Vertical */ #navmenu-h { background: #000; } #navmenu-h li.alignright { float: right; } ul#navmenu-h { margin: 0 0 1em 0; border: 0 none; padding: 0; width: 950px; /*For KHTML*/ list-style: none; height: 36px; border-bottom: 1px solid #fc6300; } ul#navmenu-h li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 36px; } ul#navmenu-h ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 36px; left: 0; border-left: 1px solid #fc6300; border-right: 1px solid #fc6300; border-bottom: 2px solid #fc6300; } ul#navmenu-h ul:after /*From IE 7 lack of compliance*/ { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#navmenu-h ul li { width: 160px; float: left; /*For IE 7 lack of compliance*/ display: block !important; /*For IE*/ } /* Root Menu */ ul#navmenu-h a { padding: 0px 20px 0 20px; float: none !important; /*For Opera*/ /*For IE*/ display: block; background: #000; color: #ccc; font: 18px/36px Helvetica; text-decoration: none; /*For IE*/ } /* Root Menu Hover Persistence */ ul#navmenu-h a:hover, ul#navmenu-h li:hover a, ul#navmenu-h li.iehover a { background: #333; color: #fc6300; } /* 2nd Menu */ ul#navmenu-h li:hover li a, ul#navmenu-h li.iehover li a { float: none; background: #000; color: #ccc; } /* 2nd Menu Hover Persistence */ ul#navmenu-h li:hover li a:hover, ul#navmenu-h li:hover li:hover a, ul#navmenu-h li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover a { background: #333 url('images/arrow.gif') top left no-repeat; color: #fc6300; } /* 3rd Menu */ ul#navmenu-h li:hover li:hover li a, ul#navmenu-h li.iehover li.iehover li a { background: #000; color: #ccc; } /* 3rd Menu Hover Persistence */ ul#navmenu-h li:hover li:hover li a:hover, ul#navmenu-h li:hover li:hover li:hover a, ul#navmenu-h li.iehover li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover a { background: #333; color: #fc6300; } /* 4th Menu */ ul#navmenu-h li:hover li:hover li:hover li a, ul#navmenu-h li.iehover li.iehover li.iehover li a { background: #000; color: #ccc; } /* 4th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li a:hover, ul#navmenu-h li:hover li:hover li:hover li:hover a, ul#navmenu-h li.iehover li.iehover li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover li.iehover a { background: #333; color: #fc6300; } /* 5th Menu */ ul#navmenu-h li:hover li:hover li:hover li:hover li a, ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li a { background: #000; color: #ccc; } /* 5th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li:hover li a:hover, ul#navmenu-h li:hover li:hover li:hover li:hover li:hover a, ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover a { background: #333; color: #fc6300; } /* 6th Menu */ ul#navmenu-h li:hover li:hover li:hover li:hover li:hover li a, ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover li a { background: #000; color: #ccc; } /* 6th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li:hover li:hover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover li.iehover li.iehover li a:hover { background: #333; color: #fc6300; } ul#navmenu-h ul ul, ul#navmenu-h ul ul ul { display: none; position: absolute; top: 0; left: 160px; } /* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu-h li:hover ul ul, ul#navmenu-h li:hover ul ul ul, ul#navmenu-h li:hover ul ul ul ul, ul#navmenu-h li:hover ul ul ul ul ul, ul#navmenu-h li.iehover ul ul, ul#navmenu-h li.iehover ul ul ul, ul#navmenu-h li.iehover ul ul ul ul, ul#navmenu-h li.iehover ul ul ul ul ul { display: none; } ul#navmenu-h li:hover ul, ul#navmenu-h ul li:hover ul, ul#navmenu-h ul ul li:hover ul, ul#navmenu-h ul ul ul li:hover ul, ul#navmenu-h ul ul ul ul li:hover ul, ul#navmenu-h li.iehover ul, ul#navmenu-h ul li.iehover ul, ul#navmenu-h ul ul li.iehover ul, ul#navmenu-h ul ul ul li.iehover ul, ul#navmenu-h ul ul ul ul li.iehover ul { display: block; } ul li.current_page_item { background: #d0d76f; }
Any help would be greatly appreciated.
Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
- The topic ‘CSS Drop down not working in IE6’ is closed to new replies.