Question

我一直在努力使用这段代码已经有好几个小时了，我一直无法修复它。这是我的水平导航CSS：

#topmenu {
    position: relative;
    width: 690px;
    left: 270px;
    top: 11px;
}
#nav {
    padding: 0px;
    margin: 0px;
    float: left;
}
#nav li {
    float: left;
    position: relative;
    list-style: none;
    margin: 0px;
    margin-right: 6px;
}
#nav li ul {
    display: none;
    margin: -1em 0 0 -3em;
    padding: 1em;
    padding-top: 1.2em;
    position: absolute;
    top: 24px;
    z-index: 500;
    opacity: 0.96;
    ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
    filter: alpha(opacity=96);
}
#nav li:hover ul {
    display: block;
}
#nav li ul li {
    display: block;
    clear: both;
}
#nav li ul li a {
    border-radius: 0px;
    width: 125px;
    font-size: 11px;
    padding-left: 25px;
    padding-right: 0px;
    padding-bottom: 5px;
}
#nav li ul li span {
    float: left;
    color: #FFF;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    background: #6AC1F3;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 0px;
    width: 145px;
}
#nav a {
    float: left;
    color: #FFF;
    font-size: 13px;
    text-decoration: none;

    display: block;
    background: #6AC1F3;
    padding: 5px 25px 5px 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -webkit-top-left-radius: 10px;
    -webkit-top-right-radius: 10px;
}
#nav a:hover, #nav a.selected {
    background-color: #FEA14F; 
}

这是我的HTML代码：

    <div id="topmenu">
        <ul id="nav">
            <li><a class="rounded" href="index.html">Home</a></li>
            <li><a class="rounded" href="about-us.htm">About Us</a></li>
            <li><a class="rounded" href="contact.htm">Contact</a></li>
            <li><a class="rounded" href="#">Services</a>
                <ul>
                    <li><span>Manage</span></li>
                    <li><a href="manage-it-management.htm">IT Management</a></li>
                    <li><a href="manage-helpdesk-support.htm">Helpdesk Support</a></li>
                    <li><a href="manage-planning-and-consulting.htm">Planning and Consulting</a></li>
                    <li><span>Instruct</span></li>
                    <li><a href="instruct-software-training.htm">Software Training</a></li>
                    <li><a href="instruct-custom-curriculum.htm">Custom Curriculum</a></li>
                    <li><a href="instruct-social-networking.htm">Social Networking</a></li>
                    <li><span>Grow</span></li>
                    <li><a href="grow-website-design.htm">Website Design</a></li>
                    <li><a href="grow-website-optimization.htm">Website Optimization</a></li>
                    <li><a href="grow-internet-marketing.htm">Internet Marketing</a></li>   
                    <li><span>Secure</span></li>
                    <li><a href="secure-remote-back-up.htm">Remote Back Up</a></li>
                    <li><a href="secure-scanning-and-storage.htm">Scanning and Storage</a></li>
                    <li><a href="secure-spam-and-virus-protection.htm" class="roundbtm">Spam and Virus Protection</a></li>
                </ul>
            </li>
            <li><a class="rounded" href="products.htm">Products</a></li>
            <li><a class="rounded" href="real-estate-solutions.htm">Real Estate Solutions</a></li>
        </ul>
    </div>

该代码适用于Firefox，Chrome，但我无法使其适用于IE。我为IE创建了其他规则：

body {
behavior: url(csshover.htc);
}

#topmenu {
    font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

但所有菜单都显示下拉列表，但当我尝试在下拉菜单中选择一个项目时，菜单会消失。

问题是什么？

Answer 1

我看到你大部分都是这样想的。您可以使用半透明png来获得96％的不透明度效果。

或者你可以使用jquery的不透明度，我认为它是跨浏览器...

Answer 2

根据我的经验，删除过滤器是不够的。主要问题是 IE li不会延伸创建一个不间断的序列，从而留下未被：hover规则覆盖的空格，从而导致子菜单消失。解决方案是将背景颜色或图像添加到子菜单的li和触发顶部菜单li，以便创建连续的li元素序列，没有空格。（透明背景颜色不起作用）。如果您不想应用背景颜色，只需添加1pxX1px透明PNG背景图像。

希望您觉得这很有帮助。

IE中的下拉菜单出现问题

2 个答案: