ホームページ > ウェブフロントエンド > htmlチュートリアル > ドロップダウン menu_html/css_WEB-ITnose の純粋な CSS 実装

ドロップダウン menu_html/css_WEB-ITnose の純粋な CSS 実装

WBOY
リリース: 2016-06-24 11:41:59
オリジナル
919 人が閲覧しました

最近、学生のグループがウェブページのトレーニングを受けました。これらの教室での知識は、彼らの参照と思い出のためにまとめられました。もちろん、Xiaoxun 兄弟はこれを行うつもりはありません。結局のところ、彼は日中プロジェクトを作成し、それを整理する時間がありません(もちろん、これは夜に整理することを意味します)。なあ、でもフロント美人の要求には逆らえないから、同意するなら従うしかない。

ここは、始めたばかりの他の小さなエビの参考にもなります。 (部分的に整理しましたが、結局のところ、漏洩できない秘密もあります)

コードをアップロードするだけで、実行できます

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>下拉菜单 启思科技教育</title><meta http-equiv="content-Type" content="text/html;charset=utf-8"><style type="text/css">.navi ul {padding: 0;list-style-type: none;}.navi ul li {text-align: center;float: left;position: relative;width: 200px;background-color: #0F8CFF;}a {color: #086808;text-decoration: none;}.navi ul li a {display: block;border: 1px solid #fff;}.navi ul li ul {display: none;left: 0;}.navi ul li ul li {display: block;}/** 效果监听 */.navi ul li:hover ul {display: block;}.navi ul li:hover ul a {color: yellow;}</style></head><body><div class="navi"><ul ><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li><li><a href="javascript:;" >传奇</a></li></ul></li><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li></ul></li><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li></ul></li><li class="li_1"><a href="javascript:;" >游戏</a><ul><li><a href="javascript:;" >传奇</a></li></ul></li></ul></div></body></html>
ログイン後にコピー

予想通り、明日にはマルチレベルのドロップダウンメニューがあるはずです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート