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

Question

我找到了类似的主题，但它不起作用。

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

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

Answer 2

请插入内容：''，如下所示的宽度属性将起作用

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