【CSS】百度百科状态栏

订阅号：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】图片动画特效（相框）