コメント：Webページを閲覧するときに、ドロップダウンナビゲーションに遭遇することがよくあります。 JSを使用して実装していたことを覚えています。ただし、この記事で次に紹介したいのは、CSS3+HTML5を使用して実装することです。興味があるなら、お見逃しなく。 CSS3を読んだ後、CSS3を学ぶことが役立つことを願っています。
レンダリングは次のとおりです。コードは次のとおりです。
<！doctype html>
<html>
<head>
<Meta charset = "utf-8" />
<title>純粋なHTML+CSSナビゲーション</title>
<！ - モルダー - >
<！ - QQ：10221408->
<！ - Chrome Firefoxのみをサポート - >
<style>
*{
マージン：0;
パディング：0;
}
.Clear：後{
クリア：両方;
コンテンツ： "。";
表示：ブロック;
高さ：0;
可視性：隠された;
}
nav {
ディスプレイ：インラインブロック。
国境：1pxソリッド＃505255;
ボーダーボトム：1PX SOLID＃282C2F;
-moz-border-radius：5px;
-webkit-border-radius：5px;
マージン：50px;
-webkit-box-shadow：1px 1px 3px＃292929;
-moz-box-shadow：1px 1px 3px＃292929;
}
li {
リストスタイル：なし;
フロート：左;
国境右：1pxソリッド＃2e3235;
位置：相対;
/*背景：-moz-linear-gradient（top、#fff、＃555d5f 2％、＃555d5f 50％、＃3e4245 100％）;
背景：-webkit-gradient（線形、0、0、0 100％、（#ffff）、カラーストップ（2％、＃555d5f）、カラーストップ（50％、＃555d5f）、（＃3e4245））;*//
背景：＃555d5f;
}
Li：Hover {
/*背景：-moz-linear-gradient（top、#fff、＃3e4245 2％、＃555d5f 80％、＃555d5f 100％）;
背景：-webkit-gradient（線形、0、0、0 100％、（#ffff）、カラーストップ（2％、＃3e4245）、カラーストップ（80％、＃3e4245）、（＃555d5f））;*//
背景：＃3e4245;
-moz-transition：バックグラウンド1S Ease-out;
-Webkit-Transition：バックグラウンド1S EaseOut;
}
li a {
表示：ブロック;
高さ：40px;
Line-Height：40px;
パディング：0 30px;
フォントサイズ：12px;
色：#ffff;
テキストシャドウ：0px -1px 0px＃000;
テキスト装置：なし;
ホワイトスペース：nowrap;
国境左：1PX SOLID＃999E9F;
ボーダートップ：1pxソリッド＃999e9f;
-moz-border-top-left-radius：2px;
-webkit-border-top-left-radius：2px;
z-index：100;
}
li> a {
位置：相対;
}
li.first a {
-Moz-Border-Radius-Topleft：4px;
-moz-border-radius-bottomleft：4px;
-webkit-border-top-left-radius：4px;
-webkit-border-bottom-left-radius：4px;
}
li.last {
国境右：0なし;
}
dl {
位置：絶対;
表示：ブロック;
トップ：40px;
左：-25px;
幅：165px;
背景：＃222222;
-moz-border-radius：5px;
-webkit-border-radius：5px;
-webkit-box-shadow：1px 1px 3px＃292929;
-moz-box-shadow：1px 1px 3px＃292929;
z-index：10;
}
Li：HoverDL {
トップ：50px;
表示：ブロック;
幅：145px;
パディング：10px;
}
dl a {
背景：透明;
ボーダー：0なし;
-moz-border-radius：5px;
-webkit-border-radius：5px;
-moz-transition：バックグラウンド0.5秒の簡単。
-webkit-transition：背景0.5s ease-out;
Z-Index：50;
}
DL A：HOVER {
色：#fff;
背景：＃999e9f;
-moz-transition：背景0.3秒の容易さ、0.3秒の容易さ。
-webkit-transition：背景0.3秒の容易さ、0.3秒の容易さ。
}
DD {
マージントップ：-40px;
不透明：0;
幅：145px;
-webkit-transition-property：all;
/* - webkit-transition-timing-function：cubic-bezier（5,0,5,0）;*/
-moz-transition-property：all;
/*-Moz-Transition-Timing-Function：Cubic-Bezier（5,0,5,0）;*/
/* - webkit-transition-delay：5s;
-moz-transition-delay：5s;*/
}
Li：HoverDD {
マージントップ：0;
不透明：1;
}
li dd：nth-child（1）{
-webkit-transition-duration：0.1s;
-moz-transition-duration：0.1s;
}
Li DD：nth-child（2）{
-webkit-transition-duration：0.2s;
-moz-transition-duration：0.2s;
}
li dd：nth-child（3）{
-webkit-transition-duration：0.3s;
-moz-transition-duration：0.3s;
}
li dd：nth-child（4）{
-webkit-transition-duration：0.4s;
-moz-transition-duration：0.4s;
}
dt {
表示：なし;
マージントップ：-25px;
パディングトップ：15px;
高さ：10px;
}
li：ホバーdt {
表示：ブロック;
}
.Darrow {
フロート：そうです;
マージン：18px 10px 0 0;
境界線：5px;
境界線：#FFF透明な透明な透明。
ボーダースタイル：ソリッド;
幅：0;
高さ：0;
Line-Height：0;
オーバーフロー：隠し;
カーソル：ポインター;
テキストシャドウ：0px -1px 0px＃000;
-webkit-box-shadow：0px -1px 0px＃000;
-moz-box-shadow：0px -1px 0px＃000;
}
.ARROW {
マージン：0 Auto;
マージントップ：-5px;
表示：ブロック;
幅：10px;
高さ：10px;
背景：＃222222;
-webkit-transform：回転（45deg）;
-moz-transform：Rotate（45Deg）;
}
</style>
</head>
<body>
<nav>
<ul>
<li> <a href = "＃">メニュー1 </a> </li>
<li>
<span> </span>
<a href = "＃">メニュー2 </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "＃"> submenu one </a> </dd>
<dd> <a href = "＃"> submenu 2 </a> </dd>
<dd> <a href = "＃"> submenu three submenu three </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "＃">メニュー3 </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "＃"> submenu one </a> </dd>
<dd> <a href = "＃"> submenu 2 </a> </dd>
<dd> <a href = "＃"> submenu three submenu three </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "＃">メニュー4 </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "＃"> submenu one </a> </dd>
<dd> <a href = "＃"> submenu 2 </a> </dd>
<dd> <a href = "＃"> submenu three </a> </dd>
<dd> <a href = "＃"> submenu 4 </a> </dd>
</dl>
</li>
<li> <a href = "＃">メニュー5 </a> </li>
<li> <a href = "＃">男性vi </a> </li>
<li> <a href = "＃">メニューセブン</a> </li>
<li> <a href = "＃">メニュー8 </a> </li>
</ul>
</nav>
</body>
</html>