IE6 IE7 Firefox_Experience 交換をサポートする純粋な CSS ドロップダウン メニュー

<meta http-equiv="Content-Type" c> <title>IE6 IE7 Firefox をサポートする CSS の下拉菜 </title> <style type="text/css"> *{マージン:0;パディング:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{リストスタイル:なし;} .menu li {float:left;position:relative;} .menu ul ul {可視性:非表示;位置:絶対;左:3px;上:23px;} .menu テーブル {位置:絶対;トップ:0;左:0;} .menu ul li:hover ul、 .menu ul a:hover ul{visibility:visible;} .menu a{表示:ブロック;ボーダー:1px ソリッド #aaa;背景:赤;パディング:2px 10px;マージン:3px;カラー:#fff;テキスト装飾:なし;} .menu a:hover{background:#f2cdb0;color:#f00;border:1px ソリッドレッド;} .menu ul ul{} .menu ul ul li {clear:both;text-align:left;font-size:12px;} .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px ソリッドレッド;} .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px Solid #fff;} </スタイル> <本文> <div class="メニュー"> <ul> <li><a href="">XHTML/CSS <!--[IE 7 の場合]><!--><!--<![endif]--> <!--[if lte IE 6]><テーブル><tr><td><![endif]--> <ul> <li><a href="">标準 <li><a href="">教程 <li><a href="">技術論文 <li><a href="">常见问题 <li><a href="">布局教程专题 <li><a href="">CSS菜单 <li><a href="">浏览器兼容 <li><a href="">滚アニメーション条相关 <li><a href="">圆角四角形专题 <li><a href="">CSS 特效欣赏专题 <!--[if lte IE 6]><![endif]--> <li><a href="">AJAX <!--[IE 7 の場合]><!--><!--<![endif]--> <!--[if lte IE 6]><テーブル><tr><td><![endif]--> <ul> <li><a href="">AJAX 教程 <li><a href="">AJAX 技術 <!--[if lte IE 6]><![endif]--> <li><a href="">JavaScript <!--[IE 7 の場合]><!--><!--<![endif]--> <!--[if lte IE 6]><テーブル><tr><td><![endif]--> <ul> <li><a href="">JSON <li><a href="">技術論文 <!--[if lte IE 6]><![endif]--> <li><a href="">DOM <li><a href="">XML <li><a href="">正则表达式 <!--[IE 7 の場合]><!--><!--<![endif]--> <!--[if lte IE 6]><テーブル><tr><td><![endif]--> <ul> <li><a href="">正则表达式简介 <li><a href="">正则表达式之道 <!--[if lte IE 6]><![endif]--> <li><a href="">网站优化 <li><a href="">電脑网络 <li><a href="">建站技术 <!--[IE 7 の場合]><!--><!--<![endif]--> <!--[if lte IE 6]><テーブル><tr><td><![endif]--> <ul> <li><a href="">PHP <li><a href="">ASP <li><a href="">ASP.NET <li><a href="">JSP <li><a href="">SQL <li><a href="">フラッシュ <li><a href="">ドリームウィーバー <!--[IE 6 の場合]><![endif]--> </style>

2007 年 4 月 16 日 CSSドロップダウンメニュー