Hover in CSS does not Work?

[rayden150]

Im trying to make a drop down menu bar purely
using HTML & CSS, but one thing that is really
bothering me is that it doesnt change to the backgroung color
when I hover over the links I dont know why..?

Heres the HTML, I used uls, div and li to create a
drop down menu:

<div id = "navigation">

       <div id = "navMenu">
      <ul>   
	    <li><a href = "#">Aboot</a>
		   <ul>
		    <li><a href = "provinces.html">Provinces</a></li>
		   	<li><a href = "monarchy.html">Monarchy</a></li>
		    <li><a href = "culture.html">Culture</a></li>
		    <li><a href = "food.html">Food</a></li>
		   </ul> <!-- End inner Ul-->
		   </li> <!-- End Main LI -->
	    </ul> <!-- end of Main UL -->
		
	
  </div> <!-- End of navMenu -->
</div> <!-- End of navigation -->

And heres the CSS im ussing trying to make the navigation bar:

#navMenu{
    margin:0;
	padding: 0;
 position: relative;
   left: 150px;
   top: 130px;
 }
 
 #navMenu ul{
   margin:0;
	padding: 0;
	line-height: 20px;
 }
 
 #navMenu li {
    margin:0;
	padding: 0;
	list-style:none;
	float: left;
	position:relative;
	background:#999;
	
 }
 
 #navMenu ul li a{
    text-align:center;
	font-family:"Courier New", Courier, monospace;
	text-decoration: none;
	height: 30px;
	width: 150;
	display: block;
	color: #FFF;
	border: 1px solid #000;
	
	
 }
 
  #navMenu ul ul{
     position: absolute;
	 visibility: hidden;
	 top: 32px;
  }
  
  #navMenu ul li:hover ul{
      visibility:visible;
	 
  }

   #navMenu li: hover { <!-- This for some reason doesnt work? -->
      background: #09F;
   }

So if anyone could help me I will deeply appreciate it! Thanks

[hexacoda]

The code only targets the outer list items and not the inner ones so far as I can tell?

Perhaps #navMenu li li:hover would work better? Should you use a instead of li?

[leakbali]

add ul element in the CSS you marked that not worked

#navMenu ul li:hover{
background : #09F;
}

[jsmall26]

looks like you forgot an element...

#navMenu ul li a:hover maybe???