我的标题左侧有一个 Logo ,中间有更多内容,右侧有 3 个导航链接。由于 Logo 的高度,标题的高度约为 50 像素,因此右侧的导航链接 (UL/LI) 也应拉伸(stretch)整个高度。
因此,如果有人将鼠标悬停在 LI 上,他可以单击该链接,而且如果有人将鼠标悬停在该链接上,顶部边框应该改变颜色。
现在,由于某种原因,两者都不起作用:( #FF0000 边框也没有改变颜色,LI 链接也没有拉伸(stretch)标题的整个高度。
你知道我做错了什么吗? :(
我认为这可能与 Bootstrap 有关,但我不确定在哪里。
这里有一个 fiddle 以防万一: http://jsfiddle.net/QLQ7d/
<header class="header_global">
<div class="container">
<div class="row">
<div class="col-xs-5 vs"><img src="logo.jpg" class="logoimg" width="180" height="50"></div>
<div class="col-xs-7 vs">More Content</div>
<div class="col-xs-12 vs">
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
还有这个 CSS:
.header_global nav {
position: relative;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
float: right;
margin-top: 0;
text-align: center;
display: block;
}
nav ul {
list-style: none outside none;
margin: 0;
}
.header_global{
border-bottom:1px solid #ececec;
}
.header_global nav li {
display: inline-block;
padding-left: 0;
padding-right: 0;
width: auto;
}
.header_global nav a, .header-global li a {
border-top: 22px solid #FFFFFF !important;
font-size: 14px;
padding: 25px;
}
.header_global nav a:hover {
border-top: 22px solid #FF0000 !important;
font-size: 14px;
padding: 25px;
}
最佳答案
我不确定你到底想做什么,但看看这个 js fiddle ,我删除了一些不必要的代码,并将导航高度设置为 50px。
顺便说一句,如果你不知道出了什么问题,你永远不应该像这样使用 !important
。
这里是:
.header_global nav {
position: absolute;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
top:-50px;
right:0;
text-align: center;
border-bottom:1px solid #ececec;
height:50px;
}
nav ul {
list-style: none outside none;
margin: 0;
}
.header_global nav li {
display: inline-block;
width: auto;
font-size: 14px;
padding: 10px 25px;
height:100%;
}
.header_global nav li a {
height:50px;
}
.header_global nav a:hover {
border-top: 22px solid #FF0000;
}
关于CSS 标题导航 UL/LI 链接...我做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21390108/