CSS标题导航UL/LI链接…我做错了什么？ 我有一个标头，左边有一个标志，中间有更多的内容，右边有3个导航链接。由于徽标的高度，标题的高度约为50像素，因此右侧的导航链接（UL/LI）也应延伸至整个高度

因此，如果有人将鼠标悬停在LI上，他可以单击链接，如果有人将鼠标悬停在链接上，则边框顶部应更改颜色

现在，由于某种原因，这两种方法都不起作用：#FF0000边框也不会改变颜色，LI链接也不会拉伸标题的整个高度

知道我做错了什么吗(

我认为这可能与引导有关，但我不确定在哪里

这里有一把小提琴以防万一：

---

对代码做了一些调整。另外，您的列结构应该“添加”到12列

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;
}
.header_global nav li a {
    display: inline-block;
    padding: 5px 25px; 
    border-top: 22px solid #FFFFFF !important;
    font-size: 14px;
}
.header_global nav li a:hover {
    border-top: 22px solid #FF0000 !important;
}

HTML

<header class="header_global">
<div class="container">
<div class="row">

    <div class="col-xs-4 vs"><img src="logo.jpg" class="logoimg" width="180" height="50"></div>
    <div class="col-xs-4 vs">More Content</div>
    <div class="col-xs-4 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>

更多内容

我不确定你到底想做什么，但看看这个，我删除了一些不必要的代码，给你的导航设置了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;
}

---

工作完美，现在我明白我做错了什么。非常感谢：）

<header class="header_global">
<div class="container">
<div class="row">

    <div class="col-xs-4 vs"><img src="logo.jpg" class="logoimg" width="180" height="50"></div>
    <div class="col-xs-4 vs">More Content</div>
    <div class="col-xs-4 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>

.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;
}