ナビゲーションバーの各項目をホバーすると画像が表示されない

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

コンテンツを挿入してください： '' と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%; 
 
}