提示：您可以先修改部分代碼再運行
導覽功能表-簡潔的純CSS二級下拉式功能表<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>導覽功能表-簡潔的純CSS二級下拉式功能表</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><style type="text/css"> /* 整體設定*/ .navigation{ margin:0; padding:0; width:610px; list-style-type:none; font:12px Arial; float:left;} .navigation li{ float:left; padding:0; margin:0 10px 0 0; _margin:0 2px 0 0; width:150px; } /* 設定選單區塊*/ .navigation li dl{ width:150px;/*ie6*/ margin:0; padding:0; background-color:#fff; border:solid 2px #666; } .navigation li dt a,.navigation li dd a{display:block;} /* 設定主選單dt */ .navigation li dt{ margin:0; padding:5px; text-align:center; background-color:#fff; font-size:12px; font-weight:bold; height:15px; overflow:hidden; } .navigation li dt a,.navigation li dt a:visited{ display:block; color:#333; text-decoration:none; } /* 設定子選單dd */ .navigation li dd{ margin:0; padding:0; color:#333; background-color:#efefef; border-bottom:dotted 1px #666; } .navigation li dd.last{ border-bottom:0; } .navigation li dd a,.navigation li dd a:visited{ display:block; color:#333; text-decoration:none; padding:4px 5px 4px 20px; } /*隱藏子選單*/ .navigation li dd{display:none;} /* 滑鼠滑入顯示子選單 */ .navigation li:hover dd,.navigation li a:hover dd{display:block;} /*ie6 hack*/ .navigation li:hover,.navigation li a:hover{border:0;} .navigation table{border-collapse:collapse; padding:0; text-align:left; } </style> </head><body><!--把下面代碼加到<body>與</body>之間--><ul class="navigation"> <li> <!--[if lte IE 6]><table><tr><td><![endif]--> <dl> <dt>菜單1</dt> <dd>菜單1-1</dd> <dd>菜單1-2</dd> <dd class="last">菜單1-3</dd> </dl> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> <li> <!--[if lte IE 6]><table><tr><td><![endif]--> <dl> <dt>菜單2</dt> <dd>菜單2-1</dd> <dd>菜單2-2</dd> <dd class="last">菜單2-3</dd> </dl> </li> <!--[if lte IE 6]></td></tr></table><![endif]--> <li> <!--[if lte IE 6]><table><tr><td><![endif]--> <dl> <dt>菜單3</dt> <dd>菜單3-1</dd> <dd>菜單3-2</dd> <dd class="last">菜單3-3</dd> </dl> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> </ul></body></html>
提示：您可以先修改部分代碼再運行
