SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>css Nav Examples</title>
  <link rel="stylesheet" href="./style.css">
<style>
nav{
    width: 70%;
    margin-left: 150px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgb(163,50,54);
}
nav ul:before,
nav ul:after {
  content: "";
  display: table;
}
nav ul:after {
  clear: both;
}
nav ul > li {
  float: left;
  position: relative;
  width: auto;
}
nav a {
  display: block;
  padding: 10px 20px;
  line-height: 1.2em;
  color: #fff;
  text-decoration: none;
}
nav li ul li {
  width: auto;
  text-align: center;
  margin-top:1px;
  background: rgb(163,50,54);
}

nav li ul a:hover {
    background-color:rgb(163,50,54);
    color: #000;
}

nav ul > li:hover ul {
  display: block;
}
nav li ul {
  position: absolute;
  display: none;
  top: 40px;
}
</style>
</head>
<body>

<div class="container">
        <nav class="nav">
            <ul>
                <li>
                <a href="#">首页</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <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>
                        <li><a href="#">创新平台</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">教学科研</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">招生就业</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">学生工作</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">信息服务</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">图书资源</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">校友工作</a>
                    <ul>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                        <li><a href="#">Subnav Item</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
	
	</div>

  
</body>
</html>