css - IE中的下拉菜单问题

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 的不透明度，我认为它是跨浏览器的......