Ie7 popup menu freezes over problem

Question

There was a problem in ie7 !, see the image below, what the dropdown menu looks like. This works great in any other browser, but in ie7, as soon as you go beyond the main leader: the top link "menu disappears". I already checked the installation of red boxes around everything, and the li element expands correctly to contain a submenu, but I cannot fix it. Any ideas?

Layout Example:

<nav> <ul class="clearfix"> <li class="dropdown-link"><a href="#" class="main-link">Top Link</a> <ul class="clearfix dropdown-holder"> <li> <div class="arrow"></div> <div class="dropdown-holder-inner"> <ul class="dropdown"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Linky</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="last-child"><a href="#">Link</a></li> </ul> </div> </li> </ul> </li> </ul> </nav>​ 

CSS is pretty heavy, so I put the full code in jsfiddle: http://jsfiddle.net/n2kgX/3/

image: http://i.stack.imgur.com/k24Du.png

Answer 1

I am creating a sample here: http://jsfiddle.net/jho1086/bbULV/5/ , I change the html and css code a bit, because in my opinion there are too many containers, And I change the HTML5 tag ( <nav> ), because IE8 and below are not supported with HTML5 unless you have fixed.

 <div id="nav"> <ul class="clearfix sf-menu"> <li class="dropdown-link"><a href="#" class="main-link">Top Link</a> <div class="clearfix dropdown-holder"> <div class="arrow"></div> <ul class="dropdown clearfix"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Linky</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="last-child"><a href="#">Link</a></li> </ul> </div> </li> </ul> </div> 

CSS

 #nav { background:#6B6C6E; width:300px; margin:30px auto 0;} .sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;} .sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;} .sf-menu .dropdown-holder{ position:absolute; left:-999em; width:218px; top:93%; } .sf-menu li:hover .dropdown-holder {left:-999em;} .sf-menu li:hover .dropdown-holder {left:0;} .arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;} .dropdown { box-shadow:0 0 5px #bec2c8; background:#fff; height:100%; position:relative; z-index:1; padding:10px 10px 5px; } .sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;} .sf-menu .dropdown li.last-child { border:0;} .sf-menu .dropdown a{ float:left; padding:5px 0; width:198px; color:#333; }​​ 

Hope this helps.

Answer 2

I have the feeling that your example is too complex.

This is the simplest implementation of a submenu (with a hang) that I know:

 <ul class="outer"> <li> <p>TOP MENU</p> <ul class="inner"> <li><a href="#">link1</a></li> <li><a href="#">link2</a> <ul class="inner"> <li><a href="">link2.1</a></li> </ul> </li> <li><a href="#">link3</a></li> </ul> </li> </ul> 

With a bit of css:

 .outer { border: 1px solid red; width: 100px; } .inner { display: none; } .inner li { padding: 0 0 0 10px; } .outer li:hover > .inner { display: block; } 

Tested on IE8 (in IE7 mode with IE7 standards). Check here: http://jsfiddle.net/BUuyV/11/

Answer 3

Here is what you can do:

 <!--[if lte IE 7]> <style type="text/css"> nav ul li:first-child ul.dropdown-holder{ left: 0px; top:-4px; } </style> <![endif]--> 

Note. . In order for the first child to work in IE8 and earlier, <!DOCTYPE> must be declared.