I don't understand why my navigation links aren't working. They just don't seem to work as hyperlinks. Please can you correct my coding?
HTML:
<div id="nav"> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fees.html">Fees</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> </div>
CSS:
#nav {
margin: 20px 0 0;
padding: 2px 0;
font-size: 12px;
position: absolute;
top: 114px;
left: 330px;
display: inline;}
ul #nav li {
display: inline;
list-style: none;
margin: 5px;
font-weight: light;
text-transform: uppercase;}
#nav a {
text-decoration: none;
color: #73BD05;
padding: 3px 3px 2px;
border: 1px dashed #FFF;}
#nav ul li a:hover {
text-decoration: none;
background-color: #FF0000;
color: #ccc;
padding: 3px 3px 1px;
border: 1px dashed #000;
}
HTML:
<div id="nav"> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fees.html">Fees</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> </div>
CSS:
#nav {
margin: 20px 0 0;
padding: 2px 0;
font-size: 12px;
position: absolute;
top: 114px;
left: 330px;
display: inline;}
ul #nav li {
display: inline;
list-style: none;
margin: 5px;
font-weight: light;
text-transform: uppercase;}
#nav a {
text-decoration: none;
color: #73BD05;
padding: 3px 3px 2px;
border: 1px dashed #FFF;}
#nav ul li a:hover {
text-decoration: none;
background-color: #FF0000;
color: #ccc;
padding: 3px 3px 1px;
border: 1px dashed #000;
}