Web デザイン - [CSS+DIV デザイン例: 純粋な CSS でドロップダウン ナビゲーション メニューを作成]_html/css_WEB-ITnose

以下は引用です:

デモ
< !-- [IE 7 の場合] >< !-- >
<; /a>
<; !-- <; ![endif]-- >




スタイル付きフォーム

< !-- [IE 7 の場合] >< !-- >
<; /a>
<; !-- <; ![endif]-- >


スタイル付きフォーム









em 画像サイズの比較





ボックス
< !-- [IE 7 の場合] >< !-- >
<; /a>
<; !-- <; ![endif]-- >


暗号化されたスパイのリスト
垂直メニュー
順序なしリストを拡大する



循環リンク





モジラ






モジーボックス




シャドウテキスト







エクスプローラー
< !-- [IE 7 の場合] >< !-- >
<; /a>
<; !-- <; ![endif]-- >


Internet Explorer の最初の例
横糸フォント < /a > <; /リ>
<;リ><; a href ="../ie/exampletwo.html" title ="垂直配置" >テキストを垂直方向に配置 < /a > <; /リ>
<; /ul>
<; /td ><; /tr > <; /テーブル>
<; !-- [LTE IE 6 の場合] >
<; /a>
<; ![endif ]-- >

不透明度




不透明な色を使用したカラーホイール

部分的な不透明度
部分的不透明度 II
< !-- [IE 7 の場合] >< !-- >
<; /a>
<; !-- <; ![endif]-- >


スタイル付きフォーム














リーリー

コード
< style type="text/css">
.menu {
font-family: ベルダナ、サンセリフ;
幅:750ピクセル;
位置:相対;
フォントサイズ:0.85em;
padding-bottom:250px;
}
.menu ul {
padding:0;
マージン:0;
リストスタイルタイプ: なし;
}
.menu ul li {
float:left;
位置:相対;
}
.menu ul li a, .menu ul li a:visited {
display:block;
テキスト装飾:なし;
色:#000;
幅:139ピクセル;
高さ: 3em;
色:#000;
ボーダー:1px ソリッド #fff;
border-width:1px 1px 0 0;
背景:#dfc184;
padding-left:10px;
行の高さ:3em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
幅:139ピクセル;
}
.menu ul li ul {
表示: なし;
}
テーブル {
マージン:-1px;
border-collapse:collapse;
フォントサイズ:1em;
}
/* IE 以外のブラウザに固有 */
.menu ul li:hover a {
color:#fff;
背景:#bd8d5e;
}
.menu ul li:hover ul {
display:block;
位置:絶対;
上:3em;
マージントップ:1px;
左:0;
幅:150ピクセル;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
背景:#faeec7;
色:#000;
高さ:自動;
行の高さ:1.2em;
パディング:5px 10px;
width:129px
}
.menu ul li:hover ul li a.drop {
background:#c9c9a7 url(http://www.cnblogs.com/graphics/drop.gif) 右下繰り返しなし;
}
.menu ul li:hover ul li a:hover {
background:#c9c9a7;
色:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
位置:絶対;
左:150ピクセル;
トップ:0;
幅:150ピクセル;
}
.menu ul li:hover ul li:hover ul.left {
left:-150px;
}


.menu ul li a:hover {
color:#fff;
背景:#bd8d5e;
}
.menu ul li a:hover ul {
display:block;
位置:絶対;
上:3em;
左:0;
背景:#fff;
マージントップ:0;
マージントップ:1px;
}
.menu ul li a:hover ul li a {
display:block;
背景:#dbe4ab;
色:#000;
高さ:自動;
行の高さ:1.5em;
パディング:5px 10px;
幅:150ピクセル;
幅:129ピクセル;
}
.menu ul li a:hover ul li a.drop {
background:#c9c9a7 url(http://www.cnblogs.com/graphics/drop.gif) 右下 繰り返しなし;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
位置:絶対;
高さ:0;
幅:0;
}
.menu ul li a:hover ul li a:hover {
background:#c9c9a7;色:#000;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
位置:絶対;
トップ:0;
色:#000;
左:150ピクセル;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}


< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->


< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->




< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->


スパイのコード化されたリスト

< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->



< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->



< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->



< !--[IE 7 の場合]>< !-->
< /a>
< !--< ![endif]-->










var now = new Date();
document.write("< img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime( ) + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>");


りー

りー

りー

< style type="text/css">
.menu {
フォントファミリー : ベルダナ、サンセリフ ;
幅: 750ピクセル;
位置: 相対;
フォントサイズ: 0.85em ;
パディングボトム: 250ピクセル;
}
.menu ul {
パディング : 0 ;
マージン: 0 ;
リストスタイルタイプ: なし ;
}
.menu ul li {
float : left ;
位置: 相対;
}
.menu ul li a, .menu ul li a:visited {
display : block ;
テキスト装飾: なし ;
カラー:#000;
幅: 139ピクセル;
高さ: 3em;
カラー:#000;
ボーダー: 1px ソリッド #fff ;
ボーダー幅 : 1px 1px 0 0 ;
背景: #dfc184 ;
パディング左 : 10px ;
行の高さ: 3em ;
}
* html .menu ul li a, .menu ul li a:visited {
width : 149px ;
幅: 139ピクセル;
}
.menu ul li ul {
表示 : なし ;
}
テーブル {
マージン : -1px ;
border-collapse : 折りたたむ ;
フォントサイズ: 1em ;
}

/* IE 以外のブラウザに固有 */
.menu ul li:hover a {
color : #fff ;
背景: #bd8d5e ;
}
.menu ul li:hover ul {
display : block ;
位置: 絶対;
トップ: 3em;
マージントップ : 1px ;
左: 0 ;
幅: 150ピクセル;
}
.menu ul li:hover ul li ul {
表示 : なし ;
}
.menu ul li:hover ul li a {
display : block ;
背景: #faeec7 ;
カラー:#000;
高さ: 自動;
行の高さ: 1.2em ;
パディング: 5px 10px ;
width : 129px
}
.menu ul li:hover ul li a.drop {
background : #c9c9a7 url(http://www.cnblogs.com/graphics/drop.gif) 右下 no-repeat ;
}
.menu ul li:hover ul li a:hover {
背景 : #c9c9a7 ;
カラー:#000;
}
.menu ul li:hover ul li:hover ul {
display : block ;
位置: 絶対;
左: 150ピクセル;
トップ : 0 ;
幅: 150ピクセル;
}
.menu ul li:hover ul li:hover ul.left {
left : -150px ;
}


りー

< !--[IE 6 の場合]>
< style type="text/css">
.menu ul li a:hover {
color : #fff ;
背景: #bd8d5e ;
}
.menu ul li a:hover ul {
display : block ;
位置: 絶対;
トップ: 3em;
左: 0 ;
背景: #fff ;
マージントップ : 0 ;
マージントップ : 1px ;
}
.menu ul li a:hover ul li a {
display : block ;
背景: #dbe4ab ;
カラー:#000;
高さ: 自動;
行の高さ: 1.5em ;
パディング: 5px 10px ;
幅: 150ピクセル;
幅: 129ピクセル;
}
.menu ul li a:hover ul li a.drop {
background : #c9c9a7 url(http://www.cnblogs.com/graphics/drop.gif) 右下 no-repeat ;
}
.menu ul li a:hover ul li a ul {
可視性 : 非表示 ;
位置: 絶対;
高さ: 0 ;
幅: 0 ;
}
.menu ul li a:hover ul li a:hover {
背景 : #c9c9a7 ;カラー:#000;
}
.menu ul li a:hover ul li a:hover ul {
可視性 : 表示 ;
位置: 絶対;
トップ : 0 ;
カラー:#000;
左: 150ピクセル;
}
.menu ul li a:hover ul li a:hover ul.left {
left : -150px ;
}

りー