Arka plan görüntüleri ile navbar bağlantıları nasıl oluşturabilirim?

Bunların hepsinde çok yeniyim. Ben bir kütüphane fen öğrencisiyim ve nav içinde vurgulu ve aktif bağlantıların üzerinde duran bir arka plan görüntüsü içeren basit bir gezinme yapısı oluşturmaya çalışıyorum. Bunu oldukça uzun bir süre boyunca inceledim ve (bir bütün olarak kod mükemmel olmayabilir - üzgünüm! Öğreniyorum!) Bu gerçekten uğraştığım kısım.Arka plan görüntüleri ile navbar bağlantıları nasıl oluşturabilirim?

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<link href="ex4.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="nav"> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="instruction.html">Instruction</a></li> 
     <li><a href="innovation.html">Innovation</a></li> 
     <li><a href="community.html">Community</a></li> 
     <li><a href="about.html">About</a></li> 
    </ul> 
    </div> 
</body> 
</html>

Ve CSS:

@charset "UTF-8"; 
/* CSS Document */ 

body { 
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; 
    } 

#nav { 
    width: 600px; 
    padding: 30px 20px 0 20px; 
    background-color: lavender; 
    height: 50px; 
    position: absolute; 
    left: 170px; 
    top: 50px; 
    text-align:center; 
    margin-left: auto; 
    margin-right: auto; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 1.5em; 
    border-bottom: 1px solid #2B2434; 
} 

#nav ul li { 
    display: inline-block; 
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
    text-transform: uppercase; 
    align-content: center; 
} 

#nav ul li a { 
    padding: 30px 20px 15px 20px; 
} 

#nav ul a:link, #nav ul a:visited { 
    color: #443743; 
    text-decoration: none; 
} 

#nav ul a:hover, #nav ul a:active { 
    color: #443743; 
    text-decoration: none; 
    background-image: url(/document.png); 
    background-size: 100px 100px; 
    background-repeat: no-repeat; 
}

kaynak

2016-04-07 perfectstorms

İşte

html var? – Maxwelll

Özür dilerim, farketmediğimi farketmedim. Arka plan resimleri gezinti çubuğunda görünmüyor. – perfectstorms

Lütfen resim yolunuzu kontrol edin. – abhi312