html部分=======================================
<nav class="navbar navbar-default" style="z-index: 1000;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header col-md-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://bbs.csdn.net/topics/#"><img src="https://img.uj5u.com/2021/01/09/162774090432242.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav col-md-6">
<li class="active"><a href="https://bbs.csdn.net/topics/#">首頁 <span class="sr-only">(current)</span></a></li>
<li><a href="https://bbs.csdn.net/topics/#">發現</a></li>
<li><a href="https://bbs.csdn.net/topics/#">職位</a>
<ul style="z-index: 1000;">
<li>職位</li>
<li>公司</li>
<li>發布職位</li>
</ul>
</li>
<li><a href="https://bbs.csdn.net/topics/#">活動</a></li>
<li><a href="https://bbs.csdn.net/topics/#">正版素材</a></li>
<li><a href="https://bbs.csdn.net/topics/#">課程</a></li>
<li><a href="https://bbs.csdn.net/topics/#" class="reddot">...</a></li>
</ul>
<ul class="nav navbar-nav navbar-right col-md-3">
<li><a href="https://bbs.csdn.net/topics/#"><img src="https://img.uj5u.com/2021/01/09/162774090432243.png" alt="" width="20px" height="20px"></a></li>
<li><a href="https://bbs.csdn.net/topics/#"><img src="https://img.uj5u.com/2021/01/09/162774090432244.png" alt="" width="20px" height="20px"></a></li>
<li><a href="https://bbs.csdn.net/topics/#">登錄 |</a></li>
<li style="margin-left: -30px;"><a href="https://bbs.csdn.net/topics/#">注冊</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
css部分====================================================
.navbar-collapse>.navbar-nav>li{
float: left;
text-align: center;
line-height: 40px;
}
.navbar-collapse>.navbar-nav>li a{
text-decoration: none;
color: rgb(10, 0, 0);
}
.navbar-collapse>.navbar-nav>li:hover {
background-color: rgba(255, 255, 255, 0);
color: #ffe300;
}
.navbar-collapse>.navbar-nav li ul {
display: none;
text-indent: 0px;
z-index: 1000;
}
.navbar-collapse>.navbar-nav li:hover ul {
list-style: none;
display: block;
}
.navbar-collapse>.navbar-nav li ul li {
width: 30px;
/* margin-left: -40px; */
background-color: rgb(253, 253, 253);
color: #282828;
}
.navbar-collapse>.navbar-nav li ul li:hover {
background-color: #ffe300;
}
.navbar-collapse>.navbar-nav>ul li ul{
width: 100px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246376.html
標籤：HTML(CSS)
上一篇：系結事件里面的定時器