HTMLはBaidu Encyclopedia Navigation Dropdown Menu機能を模倣します。特定のコードは次のとおりです。
デモ図1
<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> html+css imitation baidu百科事典ナビゲーションドロップダウンメニュー</title> <link href = css/style.css rel = styleSheet type = text/css/> </head> <body> <body> <divクラス=ヘッダー> class = nav-top> <div class = nav-content> <ul class = nav-content-box> <li class = index on> <span> <a href =＃> home </a> </span> </li> <li class = cat> <span> href =＃> culture </a> </li> <li> <a href =＃>地理</a> </li> <li> <a href =＃>地理</a> </li> <li> <a href =＃>歴史<li> <a href =＃> art </a> </li> <li> <a href =＃> people </a> </li> <li> <a href =＃>経済</a> </li> <li> <a href =＃>テクノロジー</a> </</li> <li> <a href =＃> </ href =＃> sports </a> </li> </li> </li> <li> <a href =＃> sports </a> </li> </li> <li> href =＃>デジタル博物館</a> </li> <li> <a href =＃> href =＃>都市百科事典</a> </li> <li> <a href =＃>大学百科事典</a>百科事典</a> </li> </li> </li> <li> <a href =＃>科学百科事典</a> </li> </li> </li> <li> <a href = javascript：void（0）> users </a> </span> <ul href =＃>夢の燃焼計画</a> </li> <li> <a href =＃> Encyclopediaタスク</a> </li> <li> <a href =＃> encyclopedia Mall </a> </li> </li> </li> <li class = cooperation> <li class = cooperation> <span> <a href =＃>百科事典モール</a> </li> </li> </li> <li class = cooperation> <span> <a href = javascript：void（0）>権威ある協力</a> </span> <ul> <li> </a href =＃> faq </a> </li> <li> <a href =＃>連絡先情報</a> </li> </li> </li> </li> <li> <a href =＃>連絡先情報</a> </li> </li> </li> </li> <liクラス百科事典</a> </span> <ul> <li> <a href =＃>クライアント</a> </li> <li> <a href =＃> webバージョン</a> </li> </li> </li> </ul> </div> </div> </div> div> div> </div> </div> </htmlスタイル
ボディ{マージン：0;パディング：0; font-family：arial、tahoma、 'microsoft yahei'、 '/5b8b/4f53'、sans-serif ;;} .top-bar {background-color：＃f3f3f3; text-align：center; padding：2.5em;} a {padding-bottom：3px; color：white; text-decoration：none;} ul {list-style：none; padding：0; margin：0;} li {center：center;} .nav-bar {position：relative; z-index：1000;オーバーフロー：hidden; min-width：900px; height：45px;}。nav-bar：hover {オーバーフロー：可視; -webkit-transition：すべて0.5s ease;遷移：すべて0.5s簡単;}。nav-bg {位置：絶対;幅：100％;高さ：272px;背景：＃24619c;背景：rgba（36,97,158、.95）; - webkit-transition：.3s;遷移：.3s; z-dexex：9999;} ＃5895d5;国境圏：1pxソリッド＃3b92e9;背景：＃459df5;}。nav-content {position：asposity; width：80％;左：10％;} 00％;}。nav-content-box> li {float：left; line-height：43px;}。nav-content-box> li：hover {background：＃19508b;} ：block; width：100％; margin：0; height：41px; line-height：41px;}。nav-content-box> li：hover> span> a {background：＃338ce6;} ul> li.index、ul> li.cat、ul > li.special、ul> li.user、ul> li.cooperation、ul> li.mobile {width：120px;} ul> li.index {height：43px;} ul.nav-content-box> li> ul {border-right：solid 1PX＃3A6FA2;マージン：10px 0 6px} ul.nav-content-box> li> ul：after {visibility：hidden; display：block; font-size：0; content： ; clear：両方; height：0} .nav-content-box> li：hover> ul {border-right：none; padding-right：1px;} ul.nav-content-box> li> li {float：left; width：10 0％; line-height：2; text-align：center;} ul.nav-content-box> li.cat> ul> li {width：49％;} ul.nav-content-box> li> ul> a {display：block; width：100％;}要約します上記は、編集者が紹介したHTML Imitation Baidu Encyclopedia Navigation Drop-Down Menu機能です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！
この記事が役立つと思われる場合は、再版してください。ソースを示してください、ありがとう！