1

css ドロップダウン メニューが機能していますが、1 つだけ例外があります。最後のメニュー (第 3 層) には、リストの最後の項目のみが表示されます。

ページは現在ここにあります: http://www.hodentalcompany.com/pages/syringe2.html メニューは、テキストの右側の列の下部、「販売店から注文する」にあります。

ご覧のとおり、最後のメニューには項目が 1 つしか表示されていません。CSSは次のとおりです。

#DealerNav { margin: 0; padding: 0; }
#DealerNav li { list-style-type: none; position: relative; }
#DealerNav li ul { display: none; }
#DealerNav a.first { width:100%; font-size: 100%;font-weight: bold; color: #54ABDF; background-color: #FFF; margin-left:-.5em; }
#DealerNav a { display:block; font-size: 90%; width: 12em; padding: .5em; margin: 2px 0; background-color: #54ABDF; color: #FFF;  }
#DealerNav a:hover { color: #CEF; }
#DealerNav a:hover.first { color: #38B; }
#DealerNav li li a { margin-left:-3.25em; }
#DealerNav li:hover > ul { display: block; }
#DealerNav ul ul a { margin-left:6.45em; margin-top: -2.25em; }

そして、ここに簡略化されたコードがあります：

<ul id="DealerNav">
  <li><a href="#" class="first">Order from your dealer</a>
    <ul>
    <li><a href="#">BFC Syringe (empty)</a>
            <ul>
            <li><a href="http://www.atlantadental.com" target="_blank">
                Atlanta Dental</a>
            </li>
            <li>
                <a href="http://www.benco.com" target="_blank">
                Benco Dental
                </a>
            </li> 
             <li>  
                <a href="http://www.burkhartdental.com" target="_blank">
                Burkhart Dental</a>
             </li>
             <li>
                <a href="http://www.smartpractice.com/cgi-bin/WebObjects/SmartPracticeStore.woa/wa/gotoStyle?styleNumber=S699230&g=AF_HODENTAL" target="_blank">
                Smart Practice
                </a>
             </li>
       </ul>
    </li>
    <li><a href="#">BFC Complete<br />(prefilled with Vaccu•sil)</a>
          <ul>
          <li>
                <a href="http://practicon.com/Harmony-Intro-Pack/p/70-90122/" target="_blank">
                Practicon Dental
                </a>
             </li>
          </ul>
             </li>
    <li><a href="#">Vaccu•sil Heavy Body</a>
         <ul>
            <li>
                <a href="http://www.atlantadental.com" target="_blank">
                Atlanta Dental</a>
            </li>
            <li>
                <a href="http://www.benco.com" target="_blank">
                Benco Dental
                </a>
            </li> 

             <li>
                <a href="http://www.smartpractice.com/cgi-bin/WebObjects/SmartPracticeStore.woa/wa/gotoStyle?styleNumber=S699230&g=AF_HODENTAL" target="_blank">
                Smart Practice
                </a>
             </li>
       </ul> 
    </li>

どうしたの？

4

2 に答える 2

0

ネガを使用したためmargin-top、すべてのサブメニュー項目が互いに重なり合っています。これにより、最後のサブメニュー項目のみが表示されます。負のマージンを使用する代わりにposition: absolute、各メニュー項目の右側にサブメニューを配置するために使用できます。このjsfiddleを見て、このアプローチの詳細を確認してください。

于 2012-10-11T02:33:44.143 に答える
0

このcssを変更してみてください：

#DealerNav li:hover > ul {
    display: block;
    position: absolute;
    top: 0px;
}
#DealerNav ul ul a {
    margin-left: 6.45em;
    display: block;
}
于 2012-10-11T02:43:30.997 に答える