我刚刚创建了一个导航栏和一个悬停功能。但现在的问题是,当我将鼠标悬停在HOME,BEDROOMS和CONTACT US上时,颜色在导航栏上从上到下完全无效...但在其他人身上(例如:设施服务)颜色完全有效。
HTML
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" style="padding-top:10px">
<li><span class="details"><strong>Phone</strong> </span><span class="contacts">021 913 0643</span></li>
<br/>
<span class="details"><strong>Email</strong> </span> <a class="contacts" href="#">info@acaciahouse.co.za </a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span ></span>Home</a></li>
<li><a href="#"><span ></span> FACILITIES<br/>
SERVICES</a></li>
<li><a href="#">BEDROOMS</a></li>
<li><a href="#">RATEs <br/>
& BOOKINGS</a></li>
<li><a href="#">SURROUNDING<br/>
ATTRACTIONS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
padding: 0 px;
background: #331a00;
padding-left:12px;
padding-right: 12px;
border: 0px;
}
.navbar ul.navbar-right li a{
color: #ffffff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding-top: 30px;
padding-bottom: 20px;
margin:0;
text-align: center;
}
.navbar ul.navbar-right li a:hover{
background:#000000;
}
答案 0 :(得分:5)
我必须使用min-height: 90px;
.navbar-nav.navbar-right li
和display
属性.navbar-nav.navbar-right li
和.navbar-nav.navbar-right li a
。
要使文字垂直中间使用,请使用css。
更新了CSS
.navbar{
background: #331a00;
}
.navbar ul li a{
color: #ffffff !important;
text-transform: uppercase;
}
.navbar .navbar-default {
background:none;
border:0;
}
.navbar ul.navbar-right li a:hover{
background:#000000;
}
@media (min-width: 768px){
.navbar ul li a{
text-align:center;
}
.navbar-nav.navbar-right li{
display:table;
min-height:90px;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}
@media (max-width: 767px){
.navbar-nav.navbar-right li{
display:table;
width:100%;
min-height:60px;
}
.navbar-collapse{
max-height: inherit;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}
答案 1 :(得分:1)
这个CSS代码肯定是完美的:
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.navbar{
background: #331a00;
}
.navbar ul li a{
color: #ffffff !important;
text-transform: uppercase;
}
.navbar .navbar-default {
background:none;
border:0;
}
.navbar ul.navbar-right li a:hover{
background:#000000;
}
@media (min-width: 768px){
.navbar ul li a{
text-align:center;
}
.navbar-nav.navbar-right li{
display:table;
min-height:90px;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}
@media (max-width: 767px){
.navbar-nav.navbar-right li{
display:table;
width:100%;
min-height:60px;
}
.navbar-collapse{
max-height: inherit;
}
.navbar-nav.navbar-right li a{
display:table-cell;
vertical-align: middle;
}
}