HTML+CSS 下拉框
阿新 • • 發佈：2018-12-16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<STYLE type=text/css>
*{margin:0;padding:0;border:0;}
#fm { line-height: 24px; list-style-type: none; background:#666; }/*設定盒子的行高，去掉標記，設定背景顏色*/
#fm a { display: block; width: 80px; text-align:center; }/*設定A標籤為塊元素不顯示，寬度，居中*/
#fm a:link { color:#666; text-decoration:none; } /* 設定未訪問的連結樣式*/
#fm a:visited { color:#666;text-decoration:none; } /* 設定已訪問的連結樣式 */
#fm a:hover { color:#FFF;text-decoration:none;font-weight:bold; } /* 當有滑鼠懸停在連結上的顏色 */
#fm li { float: left; width: 150px; background:#CCC; }
#fm li a:hover{ background:#999; }
#fm li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 80px; position: absolute; }
#fm li ul li{ float: left; width: 80px; background: #F6F6F6; }
#fm li ul a{ display: block; width: 80px;width: 80px;text-align:left;padding-left:5px; }
#fm li ul a:link { color:#666; text-decoration:none; }
#fm li ul a:visited { color:#666;text-decoration:none; }
#fm li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; }
#fm li:hover ul { left: auto; }
#fm li.sfhover ul { left: auto; }
</STYLE>
</head>
<body>
<UL id='fm'>
<LI><A href="#">一級選單欄目</A>
<UL>
<LI><A href="#">一級選單</A></LI>
<LI><A href="#">一級選單</A></LI>
<LI><A href="#">一級選單</A></LI>
<LI><A href="#">一級選單</A></LI>
</UL>
</LI>
</UL>
</body>
</html>