<p>I wan't to change the background color of a div dynamicly using the following HTML, CSS and javascript.
HTML:</p>
<pre><code>&lt;div id=&quot;menu&quot;&gt;
    &lt;div class=&quot;menuItem&quot;&gt;&lt;a href=#&gt;Bla&lt;/a&gt;&lt;/div&gt;
    &lt;div class=&quot;menuItem&quot;&gt;&lt;a href=#&gt;Bla&lt;/a&gt;&lt;/div&gt;
    &lt;div class=&quot;menuItem&quot;&gt;&lt;a href=#&gt;Bla&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>CSS:</p>
<pre><code>.menuItem{
  display:inline;
  height:30px;
  width:100px;
  background-color:#000;
}
</code></pre>
<p>Javascript:</p>
<pre><code>$('.menuItem').hover( function(){
     $(this).css('background-color', '#F00');
},
function(){
     $(this).css('background-color', '#000');
});
</code></pre>
<p><strong>EDIT:</strong> I forgot to say that I had reasons not to want to use the css way.</p>
<p>And I indeed forgot to check if the DOM was loaded.</p>

Your code looks fine to me.
Make sure the DOM is ready before your javascript is executed by using jQuery's $(callback) function:
```
```
$(function() {
   $('.menuItem').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });
});
```
```