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">
	    <li><a href = "#">Aboot</a>
		    <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:

	padding: 0;
 position: relative;
   left: 150px;
   top: 130px;
 #navMenu ul{
	padding: 0;
	line-height: 20px;
 #navMenu li {
	padding: 0;
	float: left;
 #navMenu ul li a{
	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{

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

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

Recommended Answers

All 3 Replies

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?

add ul element in the CSS you marked that not worked

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

looks like you forgot an element...

#navMenu ul li a:hover maybe???

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.