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のウェブサイトへのご支援ありがとうございます!
この記事が役立つと思われる場合は、再版してください。ソースを示してください、ありがとう!