訂閱號：rabbit_svip

image.png

“簡書”不能發動圖，把代碼考下來運行一下就能動啦，或者看看訂閱號上的動圖。

我是通過flex來布局的。

HTML代碼

<div class="top-bar">
    這里是頭部
</div>
<div class="nav-bar">   <!-- 主容器 -->
    <div class="nav-bg">    <!-- 內容容器 -->
        <div class="nav-top">   <!-- 一級標題外容器 -->
            <div class="nav-content">   <!-- 一級標題內容器 -->
                <ul class="nav-content-box">
                <li class="index on">
                <a href="#">首頁</a>
                </li>
                <li class="cat">
                <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>
                <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>
                <li><a href="#">體育</a></li>
                </ul>
                </li>
                <li class="special ">
                <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>
                <li><a href="#">科學百科</a></li>
                </ul>
                </li>
                <li class="user">
                <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>
                <li class="cooperation">
                <a href="#">權威合作</a>
                <ul>
                <li><a href="#">合作模式</a></li>
                <li><a href="#">常見問題</a></li>
                <li><a href="#">聯系方式</a></li>
                </ul>
                </li>
                <li class="mobile">
                <a href="#">手機百科</a>
                <ul>
                <li><a href="#">客戶端</a></li>
                <li><a href="#">網頁版</a></li>
                </ul>
                </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS代碼

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif;
}
a{
  padding-bottom:3px;
  color:white;
  text-decoration:none;
}
.top-bar {
  min-width:900px;
  background-color:#f3f3f3;
  text-align:center;
  padding:2.5em;
}

.nav-bar {
  position:relative;
  overflow:hidden;
  min-width:900px;
  height:45px;
}
.nav-bar:hover{
  overflow:visible;
}
.nav-bg{
  position:absolute;
  width:100%;
  height:272px;
  background:#24619c;
  background:rgba(36,97,158,.95);
}
.nav-top{
  height:45px;
  border-top:1px solid #5895d5;
  border-bottom:1px solid #3b92e9;
  background:#459df5;
}
.nav-content{
  position:absolute;
  width:80%;
  left:10%;
  height: 100%;
}

.nav-content-box{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display: flex;
  height: 100%;
  height: calc(100% - 1px);
  flex-direction: row;
}
.nav-content-box>li {
  width: 120px;
}
.nav-content-box>li:hover{
  background:#19508b;
}
.nav-content-box>li>a{
  display:block;
  width:120px;
  text-align: center;
  margin:0;
  height:44px;
  line-height:44px;
}
ul.nav-content-box>li>ul{
  border-right:solid 1px #3a6fa2;
  height: 80%;
  margin:0;
}
.nav-content-box>li:hover>ul{
  border-right: none;
  padding-right:1px;
}
.nav-content-box>li:hover>a{
  background:#338ce6;
}
ul.nav-content-box>li>ul{
  border-right:solid 1px #3a6fa2;
  margin:10px 0 6px;
  font-size: .8em;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
ul.nav-content-box>li>ul>li{
  width:100%;
  padding-top: 8px;
  line-height:2;
  text-align:center;
}
ul.nav-content-box>li>ul>li>a {
  color: #a2c9f0;
}
ul.nav-content-box>li>ul>li>a:hover {
  color: #fff;
  border-bottom: 2px solid #fff;
}
  ul.nav-content-box>li.cat>ul>li{
  width:50%;
}                  

HTML與CSS 目錄：HTML與CSS

上一篇：【CSS】省略號

下一篇：【CSS】圖片動畫特效（相框）