【CSS】百度百科状态栏

订阅号：rabbit_svip

image.png

“”不能发动图，把代码考下来运行一下就能动啦，或者看看订阅号上的动图。

我是通过flex来布局的。

HTML代码

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

【CSS】百度百科状态栏

HTML代码

CSS代码

你可能感兴趣的:(【CSS】百度百科状态栏)