Difference between revisions of "Team:NTHU Formosa/Project"

(Created page with "{{NTHU_Formosa}}")
 
Line 1: Line 1:
−
{{NTHU_Formosa}}
+
 
 +
 
 +
<html>
 +
 
 +
 
 +
<ul class="drop-down-menu">
 +
        <li><a href="#">HOME</a>
 +
        <ul>
 +
                <li><a href="#">Project</a>
 +
                </li>
 +
                <li><a href="#">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="#">Project</a>
 +
        </li>
 +
        <li><a href="#">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>

Revision as of 21:17, 2 September 2018