Проблема с выпадающим меню в 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, которая, я думаю, является кросс-браузерной ...

Answer 2

из моего опыта удаления фильтра недостаточно.основная проблема заключается в том, что IE li не расширяются, чтобы создать одну непрерывную последовательность , оставляя пустые места, которые не охватываются правилом: hover, что приводит к исчезновению подменюРешение состоит в том, чтобы добавить цвет фона или изображение в li подменю и в верхнее меню li, чтобы создать непрерывную последовательность элементов li без пробелов.(прозрачный цвет фона не будет работать).если вы не хотите применять цвет фона, просто добавьте прозрачное фоновое изображение PNG размером 1pxX1px.

надеюсь, вы найдете это полезным.