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のために動作させることができません。ドロップダウンを表示するが、私は、ドロップダウンメニューで項目を選択しようとすると、メニューが消えている

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

#topmenu { 
    font-size: 100%; 
} 

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

しかし、すべてのメニューがありません：私は、IEのための追加ルールを作成しました。

問題点を教えてください。

Answer 1

あなたはほとんどこれを理解したことがあります。半透明のPNGを使用して、96％の不透明効果を得ることができます。

別の方法としては、フィルターを取り外し、私の経験から...私はクロスブラウザだと思うこれは、

Answer 2

をjQueryの不透明度を使用することができます十分ではありません。主な問題は、IE liは拡張されず、中断されていない1つのシーケンスを作成するため、：hoverルールでカバーされていない空のスペースが残っているため、サブメニューが消えます。 解決策は、li要素の連続したシーケンスを空白なしで作成するために、サブメニューのliとトリガートップメニューliに背景色またはイメージを追加することです。 （透明な背景色は機能しません）。背景色を適用したくない場合は、代わりに1pxX1px透明PNG背景画像を追加します。

この情報は役に立ちましたか？