ドロップダウン ナビゲーション バーは、CSS を介して実装されることもあれば、JavaScript プラグインを介して実装されることもよくあります。まず、CSS の簡略化されたバージョンを見てみましょう。ドロップダウン メニュー:
HTML コード UL リストを通じて実装:
<ul class="nav"> <li>首页</li> <li>产品</li> <li>服务 <ul> <li>设计</li> <li>研发</li> <li>交付</li> </ul> </li> <li>关于我们 <ul> <li>博客园</li> <li>FlyElephant</li> <li>keso</li> </ul> </li> </ul>
CSS コードは次のとおりです:
.nav { margin-left: 200px; margin-top:200px; } .nav li { float: left; width: 150px; background-color: #00C5CD; padding-top: 10px; padding-bottom: 10px; text-align: center; border-right: 1px solid #fff; } .nav li:last-child { border-right: none; } .nav li ul { width: 150px; position: absolute; margin-top: 10px; left: 9999px; } .nav li ul li { background-color: #00EE00; border-bottom: 1px solid #fff; } .nav li:hover ul { left: auto; }
非常に重要な点は、通常の状況では、必要な UL の位置です。表示されるのは画面外のみ、左:9999px、マウススライド上 左を自動に設定した場合〜