CSS标题导航UL / LI链接......我做错了啥？

Posted 2023-04-13

【中文标题】CSS标题导航UL / LI链接......我做错了啥？

【英文标题】：CSS header navigation UL / LI links ...what am I doing wrong?CSS标题导航UL / LI链接......我做错了什么？

【发布时间】：2014-02-18 20:05:59

【问题描述】：

我有一个左侧带有徽标的标题，中间有更多内容，右侧有 3 个导航链接。由于徽标的高度，标题的高度约为 50 像素，因此右侧的导航链接 (UL / LI) 也应拉伸整个高度。

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

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

任何想法我做错了什么？ :(

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

这是一个小提琴以防万一： 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"  ></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; 

【参考方案1】：

我不确定您到底要做什么，但请查看js fiddle，我删除了一些不必要的代码并将您的导航高度设置为 50 像素。 顺便说一句，如果您不知道出了什么问题，您永远不应该这样使用!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;

【参考方案2】：

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

http://jsfiddle.net/QLQ7d/3/

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"  ></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>

【讨论】：

完美运行，现在我明白我做错了什么。非常感谢:)