(Created page with "{{NTHU_Formosa}}") |
|||
(3 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | {{NTHU_Formosa}} | + | |
+ | {{NTHU Formosa}} | ||
+ | <html> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <ul class="drop-down-menu"> | ||
+ | <li><a href="https://2018.igem.org/Team:NTHU_Formosa/test01">HOME</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2018.igem.org/Team:NTHU_Formosa/Project">Project</a> | ||
+ | </li> | ||
+ | <li><a href="https://2018.igem.org/Team:NTHU_Formosa/Experiment">Experiment</a> | ||
+ | </li> | ||
+ | <li><a href="#">Human Pratice</a> | ||
+ | </li> | ||
+ | <li><a href="#">Team</a> | ||
+ | </li> | ||
+ | <li><a href="#">Modeling</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2018.igem.org/Team:NTHU_Formosa/Project">Project</a> | ||
+ | </li> | ||
+ | <li><a href="https://2018.igem.org/Team:NTHU_Formosa/Experiment">Experiment</a> | ||
+ | </li> | ||
+ | <li><a href="#">Human Pratice</a> | ||
+ | </li> | ||
+ | <li><a href="#">Team</a> | ||
+ | </li> | ||
+ | <li><a href="#">Modeling</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | ul { /* 取消ul預設的內縮及樣式 */ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu { | ||
+ | border: #ccc 1px solid; | ||
+ | display: inline-block; | ||
+ | font-family: 'Open Sans', Arial, sans-serif; | ||
+ | font-size: 13px; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu li { | ||
+ | position: relative; | ||
+ | white-space: nowrap; | ||
+ | border-right: #ccc 1px solid; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu > li:last-child { | ||
+ | border-right: none; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu > li { | ||
+ | float: left; /* 只有第一層是靠左對齊*/ | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu a { | ||
+ | background-color: #fff; | ||
+ | color: #333; | ||
+ | display: block; | ||
+ | padding: 0 30px; | ||
+ | text-decoration: none; | ||
+ | line-height: 40px; | ||
+ | |||
+ | } | ||
+ | ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/ | ||
+ | background-color: #ef5c28; | ||
+ | color: #fff; | ||
+ | } | ||
+ | ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/ | ||
+ | background-color: #ef5c28; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ul.drop-down-menu ul { | ||
+ | border: #ccc 1px solid; | ||
+ | position: absolute; | ||
+ | z-index: 99; | ||
+ | left: -1px; | ||
+ | top: 100%; | ||
+ | min-width: 180px; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu ul li { | ||
+ | border-bottom: #ccc 1px solid; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu ul li:last-child { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/ | ||
+ | z-index: 999; | ||
+ | top: 10px; | ||
+ | left: 90%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ul.drop-down-menu ul { /*隱藏次選單*/ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <style> | ||
+ | img { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | </html> |
Latest revision as of 13:43, 12 September 2018