"
Team:CityU HK/main.css
From 2014.igem.org
- html body {
behavior:url("csshover3.htc"); }
- menu {
width:600px; height:30px; }
- menu ul {
list-style-type:none;
margin:0; padding:0;
overflow:auto; }
- html #menu ul {
height:30px; }
- menu ul li {
float:left; } /* 解決IE6條列式餘白問題*/
- html #menu ul li {
display:inline; }
- menu ul li a {
/* 將a改為區塊元件，以便指定寬高 */ display:block; /* 這邊也要設float，否則IE6會以100%寬度顯示 */ float:left; /* 固定高度 */ height:30px; width: 100px; text-align: center; }
- menu ul li ul {
/* 讓第二層ul跳脫文件流以利定位 */ position:absolute; /* 固定寬度 */ width:100px; /* 避免出現捲軸 */ overflow:visible; /* 讓ul與母階層li相同位置 */ clear:left; margin-top: 30px; margin-right: 0; margin-bottom: 0; margin-left: 0; } /* 修正IE7絕對定位差異 */
- first-child+html #menu ul li ul {
margin-top:0; } /* 修正IE6絕對定位差異 */
- html #menu ul li ul {
margin-top:0; }
- menu ul li ul li {
/* 覆寫繼承自第一層的浮動設定 */ float:none; text-align: center; }
- menu ul li ul li a {
/* 覆寫繼承自第一層的浮動設定 */ float:none; width: 100%;/* 註：display、height、padding繼承第一層的設定 */ }
- menu ul li ul li ul {
margin-top: -30px; margin-right: 0; margin-bottom: 0; margin-left: 100px; width: 100%; } /* 修正IE7絕對定位差異 */
- first-child+html #menu ul li ul li ul {
margin-top:-30px; }
- menu ul li ul li ul li {
/* width、float繼承第二層，免設定 */ }
- menu ul li ul li ul li a {
/* width、float繼承第二層，免設定 */ } /* ---------- 隱藏與顯示階層 ---------- */
- menu ul li ul {
/* 預先隱藏第二層 */ visibility:hidden; }
- menu ul li:hover ul {
/* 觸動第一層時，顯示第二層 */ visibility:visible; }
- menu ul li:hover ul li ul {
/* 顯示第二層時，隱藏第三層，避免同時彈出 */ visibility:hidden; }
- menu ul li ul li:hover ul {
/* 觸動第二層時，顯示第三層 */ visibility:visible; }
- menu ul li ul li:hover ul li ul {
/* 顯示第三層時，隱藏第四層，避免同時彈出 */ visibility:hidden; }
- menu ul li ul li ul li:hover ul {
/* 觸動第三層時，顯示第四層 */ visibility:visible; } /* ---------- 以下為美化用，非必需 ---------- */
/* 預設字體 */
- menu {
font-size:12px; font-family:Arial, Helvetica, sans-serif; } /* 第一層ul背景色彩與邊框 */
- menu ul {
background:#6f6f6f; } /* 第一層a字型 */
- menu ul li a {
color:#FFF; text-decoration:none; line-height: 30px; } /*第二層ul背景色彩與邊框 */
- menu ul li ul {
background:#efefef; } /* 第二層a字型 */
- menu ul li ul li a {
font-size:12px; color:#333333; text-decoration:none; } /* 觸動第一層li時，改變背景色 */
- menu ul li:hover, #menu ul li a:hover {
background:#efefef; }
- menu ul li:hover a {
color:#333333; } /* 觸動第二層以上li時改變背景色 */
- menu ul li ul li:hover, #menu ul li ul li a:hover {
background:#dfdfdf; }
