CSSのみのドロップダウンメニューをサイトに追加したいと思います。1滴でこれを行うことができますが、メニューに別の層を追加するのに問題があります。
最初にリストを非表示にすることはできますが、トリガーにカーソルを合わせると、ドロップダウンリストの最初の層だけでなく、リスト全体が表示されます。
これはリストの一部です:
<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>
</ul>
</li>
<li><a href="#">BFC Complete</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.burkhartdental.com" target="_blank">Burkhart Dental</a></li>
</ul>
</li>
</ul>
そして、これはそれを制御するCSSです:
#DealerNav { margin: 0; padding: 0; font-weight: bold; }
#DealerNav li { list-style-type: none; font-size: 100%; position: relative; margin-left: -3em; }
#DealerNav li li { margin: 2px 0; }
#DealerNav li ul { display: none; }
#DealerNav a.first { width:100%; color: #555; background-color: #FFF; margin-left: 2.5em; }
#DealerNav a { display:block; width: 12em; padding: .5em; background-color: #CEF; color: #FFF; }
#DealerNav a:hover { color: #555; }
#DealerNav a:hover.first { color: #CEF; }
#DealerNav li:hover ul { display: block; }
#DealerNav ul ul { margin-left:10em; margin-top: -2.25em; }
これは複雑すぎて助けを求めることができませんか?
問題のページは一時的に次の場所にあります: http ://www.hodentalcompany.com/pages/syringe2.html
メニューは、「販売店に注文する」というテキストの右の列の下部にあります。
助けてくれてありがとう!