div+css を使用してシンプルなドロップダウン メニューを実現しますeffect_html/css_WEB-ITnose

カスタム ドロップダウン メニューを実装します。以下を参照してください。CSS はコメント化されています。

スタイル管理に次の CSS を追加し、次の CSS コードをスタイルの下部に直接コピーします。

css code: /* ドロップダウン メニュー スタイル*/

*{margin:0;padding:0; border: 0;}
#div_center { width:790px; height:23px; margin-left: auto;margin-right:auto;} /* 全体の幅と高さを定義します。背景色、中央揃え*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px;} /*第 1 レベルのメニューの行の高さを 5px に制御します。 / #nav a { display: block; width: 77px; text-align:center; font-size:12px;} /*第 1 レベルのメニュー リンクの全体的なスタイル: 各メニューの幅、中央揃え、テキスト サイズ*/ #nav a:link { color: #FFF; text-decoration:none;margin:0;} /* 未訪問のリンク*/
#nav a:visited {color:#FFF;text-decoration:none;margin:0; } /*訪問された色* /
#nav a：hover {color：＃c00; text-decoration：none;}
#nav li a：hover {background：#fffff;} /*マウスはその背景色を変更します。最初のレベルのメニュー*/
#nav li ul {line-height: 24px; リストスタイルタイプ: none;text-align:left; left: -999em; 位置: 絶対;ボーダー幅: 1px;ボーダートップスタイル: なし;ボーダー右スタイル: ソリッド;ボーダーボトムスタイル: ソリッド;ボーダー左スタイル: ソリッド;ボーダーカラー: #003399;} /* セカンダリ メニューの全体のスタイル: 行の高さ 24px; 背景フレームの幅; 境界線 1 ピクセル、上部にスタイルなし、境界線の色は 1 ピクセル;

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px; }セカンダリメニューリンクスタイル; #nav li ul a:visited {color:#。 0d5097;テキスト-decoration:none;} -weight:normal;background:#003399;}/* リンクの上にマウスを置く*/

#nav li:hover ul {left: auto;}

#nav li.sfhover ul {left: auto; }

#content { clear: left;}

テンプレートの表示したい場所に次のコードを挿入します:

DIV コード:

• ホームページ< ;/ A>


• ニュース センター
  
  
  
  • ・ニュース センター
  
  
  • ・ニュース センター
  
  


• 会社概要
  
  
  
  • < ;A href="{$InstallDir}qyjj/ShowArticle.asp?ArticleID=4">・会社概要
  
  
  • ·会社概要
  
  
  • ·会社概要
  
  
  • ・会社のスタイル
  
  
  • ・会社概要
  • ・会社概要
• 記事センター
  
  
  
  • ·記事センター< /A>
  
  
  • ·記事センター
  
  < LI>·記事センター
  
  • ・記事センター
  
  
  • < A href="{$InstallDir}Article/ShowClass.asp?ClassID=11" >・記事センター


• 国際ニュース
  
  
  
  • ・国際ニュース
  
  
  • < ;A href="{$InstallDir}wnews/ShowClass.asp?ClassID=13">・国際ニュース
  • ·国際ニュース
  
  
  • ·国際ニュース
  
  
  • ·国際ニュース
  
  
  • ·国際ニュース
  
  
  • ・国際ニュース
  
  
  • ・国際ニュース


• 画像センター< /A>
  
  
  
  • ・ピクチャ センター
  LI>・ピクチャ センター
  
  • ·ピクチャ センター

< ;LI>ダウンロード センター



• ・一般的に使用されるソフトウェア




• ・データのダウンロード


• メッセージ センター

コミュニティ フォーラム

上記の接続アドレスは私自身が変更したものです。

達成される効果は次のとおりです:

レンダリング

とても簡単ですね!

追加します。IE でテンプレート全体を中央に配置したい場合は、テンプレートの先頭に次のコードを追加する必要があります。Firefox では追加する必要はありませんが、IE では追加する必要があります。 :

補足コード