Question

我正在开发CSS水平下拉菜单（此处可用： http://jsfiddle.net/d974us89/ ）无法访问网页的html标题，菜单必须完全 IE7兼容。

当浏览器视口太小时，我的上一期是菜单包装。我找到的所有解决方案都不适用于我的菜单和IE Quirks模式。请注意，我使用浮动50％左50右方法使我的菜单居中。

理想情况下，我希望水平菜单保持在同一行。

下面是代码：

<style type='text/css'>
#centerind {float:left;width:100%;position:relative;background:transparent url(http://img11.hostingpics.net/pics/466481menufnd.png) repeat-x top;clear:both;border-top: 1px     solid #d9d9d9;border-bottom: 6px solid #00bbdf;}
#menuind,#menuind ul {clear:left;float:left;margin:0;padding:0;position:relative;left:50%;list-style:none;line-height:30px;text-align:center}
#menuind ul {white-space:nowrap;}
#menuind {height:30px;font-weight:bold;font-family:Arial;font-size:12px;}
#menuind a {display:block;color:#474747;text-decoration:none;width:144px}
#menuind ul a {color:#474747;background:url(http://img11.hostingpics.net/pics/466481menufnd.png);background-size:100% 100%}
#menuind li {display:block;float:left;margin:0;padding:0;position:relative;right:50%;border-right:1px solid #d9d9d9}
#menuind li ul {position:absolute;width:144px;left:-999em}
#menuind li ul li {border-top:1px solid #d9d9d9}
#menuind li ul ul{margin:-31px 0 0 144px;border-left:1px solid #d9d9d9}
#menuind a:hover {color:#000;background:transparent url(http://img11.hostingpics.net/pics/953608fndnoir5.png) repeat-x}
#menuind ul a:hover {color:#000;background-color:#fff}
#menuind li:hover ul ul,#menuind li.sfhover ul ul {left:-999em}
#menuind li:hover ul,#menuind li li:hover ul,#menuind li.sfhover ul,#menuind li li.sfhover ul {left:72px;min-height:0}
#menuind .menuhome {width:58px;height:30px;background:#00bbdf url(http://img11.hostingpics.net/pics/343811menuhomeiconhover.png) no-repeat center 7px;border-left: 1px solid     #d9d9d9;display:block;padding:0;}
#menuind .menuhome a {display:block;padding:0;color:#474747;text-decoration:none;width:58px}
</style>

<script type="text/javascript">
sfHover=function(){for(var e=document.getElementById("menuind").getElementsByTagName("LI"),n=0;n<e.length;n++)e[n].onmouseover=function(){this.className+=" sfhover"},e[n].    onmouseout=function(){this.className=this.className.replace(new RegExp(" sfhover\\b"),"")}},window.attachEvent&&window.attachEvent("onload",sfHover);
</script>

<div id="centerind">
<ul id="menuind">
    <li class="menuhome"><a></a></li>
    <li><a href="#">Title 1</a>
    <ul>
        <li><a href="#">Item #</a></li>
        <li><a href="#">Item #</a></li>
    </ul>
    </li>
    <li><a href="#">Title 2</a>
    <ul>
        <li><a href="#">Item #</a></li>
        <li><a href="#">Item #</a></li>
    </ul>
    </li>
    <li><a href="#">Title 3</a>
    <ul>
        <li><a href="#">Item #</a></li>
        <li><a href="#">Item #</a>
        <ul>
            <li><a href="#">Item #</a></li>
            <li><a href="#">Item #</a></li>
        </ul>
        </li>
        <li><a href="#">Item #</a>
        <ul>
            <li><a href="#">Item #</a></li>
            <li><a href="#">Item #</a></li>
        </ul>
        </li>
        <li><a href="#">Item #</a>
        <ul>
            <li><a href="#">Item #</a></li>
            <li><a href="#">Item #</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Title 4</a></li>
</ul>
</div>

防止CSS菜单包装（IE7兼容）

0 个答案: