Ie7 dropdown menu hover over issue

css, drop-down-menu, internet-explorer-7

Solution

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.

Problem

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: https://i.stack.imgur.com/k24Du.png

Original source