当我将每个项目悬停在导航栏上时，图像未显示答案

【问题标题】：image not showing when I hover each item on the navigation bar当我将每个项目悬停在导航栏上时，图像未显示
【发布时间】：2017-08-23 04:21:21
【问题描述】：

我找到了类似的主题，但没有用。

1) 当我将鼠标悬停在导航栏上的每个项目上时，我试图显示一个图像，但它没有显示出来。 2）我想创建一行重复的图像，但它没有显示在这个标签下：

<div id= "coffeeBean"></div>

示例：https://jsfiddle.net/RE006/LLo4246b/

jsfiddle 和 Stackoverflow 不允许我上传图片。

CSS：

nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em; 
width: 100%;
}

nav li {
float: left;
padding: .5em;  
}

nav a, nav a:visited { 
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none; 
}

nav a:hover, ul.nav a:active, ul.nav a:focus { 
color: #fff;
position: relative;
}

nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
}

#coffeeBean {
background-image: url(images/beans.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}

【问题讨论】：

标签： css navigation hover background-image

【解决方案1】：

        body { 
        background-color: #c4c7c6;
        color: #000;
        font-family: "Times New Roman", Times, serif; 
        font-size: 62.5%;
        position: relative;
    }

    .container {
        background-color: #fff;
        margin: 0px auto; 
        width: 80%;
    }

    nav ul {
        background-color: #dcedec;
        float: left;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
        list-style: none;
        padding-left: 1em;
        padding-top: 1em; 
        width: 100%;
    }

    nav li {
        float: left;
        padding: .5em;  
    }

    nav a, nav a:visited { 
        color: #000;
        padding: 5px 5px 5px 15px;
        text-decoration: none; 
    }

    nav a:hover, ul.nav a:active, ul.nav a:focus { 
        color: #fff;
        position: relative;
    }

    nav li a:hover::after {
      background-image: url("http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png");
      background-repeat: no-repeat;
      background-size: cover;
      border-top: 1px solid red;
      content: "";
      display: block;
      height: 40px;
      position: absolute;
      top: 0;
      width: 40px;
      opacity: .5;
      z-index:-1;
    }

    nav li a{z-index:9999;}
    header, main, footer {
        display: block;
    }

    header h1 { 
        background-color: #858070;
        color: #fff;
        font-size: 2rem; 
        letter-spacing: 2px;
        padding: 1.25em .5em .25em 1em;
        width: 100%;
    }

    img {
        filter: alpha(opacity=35); /* For IE8 and earlier */
        height: 200px;
        margin: 0px auto;
        opacity: 0.35;
        position: absolute; 
        left: 30%;
        top: 200px;
    }

    main {
        font-size: 1rem;
        padding: 1.5em;
    }

    label, input, select { 
        margin: 10px 0px;
    }

    #coffeeBean {
        background-image: url(http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png);
        background-repeat: repeat-x;
        height: 30px;
        position: absolute;
    }

    footer {
        clear: both; 
        font-size: 1rem; 
        margin-top: 50px;
        padding: 1em;
        position: relative;
        text-align: center;
    }

【讨论】：

【解决方案2】：

请插入 content:'' 和 width 属性，如下所示

nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
content:'';
width:100%;
}

【讨论】：