在ie7!中遇到问题,请参阅下面的图片,了解下拉菜单的外观.这种方法在所有其他浏览器中都可以正常工作,但是在ie7中,只要您在主要信息之外冒险,即“顶部链接”,菜单就会消失.我已经检查了所有内容周围的红色框,并且li元素正确扩展以包含子菜单但我无法修复它.有任何想法吗?
标记示例:
<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很重,所以我把完整代码放在jsfiddle:http://jsfiddle.net/n2kgX/3/上
解决方法
我在这里创建一个示例:
http://jsfiddle.net/jho1086/bbULV/5/,我更改了HTML代码和css,因为在我看来容器太多了.我更改HTML5标记(< nav>),因为HTML5不支持IE8及以下版本,除非您已修复.
<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; }
希望能帮助到你.