Ie7 dropdown menu hover over issue

Question

Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?

Example of markup:

<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 quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/

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

Answer 1

I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a 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 it helps.

Answer 2

I have a feeling that Your example is overcomplicated.

This is the simplest implementation of nested menu (with hover) I know of:

<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 little 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/