标题导航与背景图像

Question

我正在尝试创建一个标题+导航，如下所示：

但是，我发现完成任务有些困难。到目前为止我所做的是为标题设置一个坚实的背景。然后，使用:: before和:: after元素（也使用背景图片）添加锯齿状（编织外观相似的东西），到目前为止它看起来很棒，除了当我将鼠标悬停在元素上时，：before和：after元素不要使用与悬停元素相同的颜色（如图中的示例所示）。

我的方法，正确的方法还是我错过了什么？我还考虑过在整个标题之上创建一个Overlay Div，但是问题会出现在不同的分辨率上，而且我认为这不会解决原始问题，悬停时会有不同的颜色。

你们有没有任何可以提供帮助的想法，或者我在网上找不到的材料？

这是我的代码：https://jsfiddle.net/nbrLck99/1/

.main-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    background-image: url('../images/desktop-header-background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 10px;
    display: block;
    width: 100%;
}

编辑：设法上传并调整jsfiddle中的图像。

Answer 1

这不会奏效。

您的:after元素是背景图片。这意味着它不受background-color属性的影响。您必须为每个菜单项创建一个:after元素，然后使用:hover选择器更改它的背景图像。您需要一个默认背景图像和一个用于悬停图像的图像。如果你想拥有不同的波浪＆＃34;您可以为每个标签创建图像。

快速预览：

＆＃13;

＆＃13;

.main-nav {
    position: relative;
}
/* magic starts */
.level_1 > li > a::after {
    content: '';
    position: absolute;
    top: 100%;
    background-image: url('https://i.imgsafe.org/a58a017b5d.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 10px;
    display: block;
    width: 100%;
}
.level_1 > li:hover > a::after {
    background-image: url('http://i.imgsafe.org/a5f53cc8bf.png');
    z-index: 10;
}
/* magic ends */

.main-nav .level_1 {
    margin: 0;
    display: inline-block;
    background-color: #0E5780;
    width: 100%;
    position: relative;
}

.main-nav .level_1 li {
    position: relative;
}

.main-nav .level_1 li:hover {
    background-color: #f00;
}

.main-nav .level_1 > li {
    display: block;
    float: left;
    padding-top: 15px;
    padding-bottom: 15px;

}

.main-nav .level_1 li a {
    display: block;
    padding: 10px;
}

.main-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 15px;
    background-color: #0f0;
}

.main-nav .level_1 > li:hover ul {
    display: block;
}

＆＃13;

<div class="container">
        <nav class="main-nav">
            <ul class="level_1">
                <li class="dropdown">
                    <a href="#">home</a>
                    <ul class="level_2">
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                    </ul>
                </li>
                <li><a href="#">about</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
            </ul>
        </nav>
    </div>

＆＃13;

＆＃13;

＆＃13;