导航后面的框 css

Question

所以我的项目中有这个导航栏，就目前而言，当您将鼠标悬停在它上面时，文本会改变颜色。

HTML:

<div class = "container">
    <div class = "header">
        <div class = "header-main">

        </div>

        <div class = "header-nav">
            <ul>
                <li><a class = "active" href="#">Home</a></li>
                <li><a href="about">About</a></li>
                <li><a href="contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

CSS:

* {
    padding = 0;
    margin = 0;
}

.container {
    margin: 0 auto;
    width: 940px;
}

.header-main{
    border-bottom: 1px solid #dadada;
    padding: 20px 0;
}

.header-nav {
    padding: 0 0;
}

.header-nav ul {
    list-style: none;
}

.header-nav ul li {
    float: left;
    margin-right: 20px;
}

.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
}

.header-nav ul li a.active {
    color: #2ecc71;
}

.header-nav ul li a:hover {
    color: #3e3e3e;
}

我想知道的是，当您将鼠标悬停在它上面时，我如何添加一个改变颜色的框（编辑：并跨越导航的高度）。我能找到的最好的例子是 Windows 10's site

Answer 1

.header-nav ul li a {
    display:block;
    padding:10px;
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
}

.header-nav ul li a:hover {
    color: #fff;
    background:#000;
    padding:10px;

}

Eidting 这两种风格类我认为可以达到目的。看看吧。

Answer 2

您必须控制元素大小。你可以用

来解决这个问题

// apply hover to li instead a
.header-nav ul li:hover {
    color: #3e3e3e;
    background-color: red;
}

// remove the margins for the ul
.header-nav ul {
    margin-top: 0px;
    margin-bottom: 0px;
}

// implement the margins of the ul on li but as padding instead of margin
.header-nav ul li {
    padding-top: 10px;
    padding-bottom: 10px;
}

参见fiddle示例

Answer 3

您错过的几件事：

清除浮动
从 ul 中删除边距和底部，这会导致意外的尺寸。
向 link 锚点添加填充。

CSS::

* {
    padding=0;
    margin=0;
}
.container {
    margin: 0 auto;
    width: 940px;
}
.header-main {
    border-bottom: 1px solid #dadada;
    padding: 20px 0;
}
.header-nav {
    padding: 0 0;
}
.header-nav ul {
    list-style: none;
    margin:0;
    padding:0;
}
.header-nav ul li {
    float: left;
    margin-right: 20px;
}
.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family:'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    padding:5px 10px;
}
.header-nav ul li a.active {
    color: #2ecc71;
    background-color:#BFBFBF;
}
.header-nav ul li a:hover {
    color: #3e3e3e;
    background-color:#BFBFBF;
}
.header-nav ul:after {
    clear:both;
    content:"";
    display:block;
}

演示：https://jsfiddle.net/lotusgodkk/82n0rwb7/5/

Answer 4

1. 设置块元素链接

2. 向链接添加填充（不是列表项）

.header-nav ul li a {
    color: #737373;
    text-decoration: none;
    font-size: 18px;
    font-family: 'Novecentosanswide-DemiBold';
    text-transform: uppercase;
    display: block;
    padding: 4px 8px;
}

3. 设置链接的背景颜色

.header-nav ul li a.active {
    background-color: #2ecc71;
}

.header-nav ul li a:hover {
    background-color: #3e3e3e;
}

4.清除ul

.header-nav ul:after {
    clear: both;
    content: "";
    display: table;
}

5. ???

6.利润

https://jsfiddle.net/BramVanroy/82n0rwb7/9/

也许没有列表项的边距看起来更漂亮？ Like so.

(我刚刚注意到你的fiddle的CSS有错误。你将margin = 0设置为*，但指示符应该是冒号不是等号，像这样：margin: 0.)

导航后面的框 css

Box behind navs css

html

css

navbar