Real messy JQUERY

I'm trying to make a nav dropdown using jquery and css, and I feel like I'm jury-rigging far beyond my needing to, however I'm still new to jquery and can't quite figure out a better/cleaner way to get this to work... Any insight would be GREATLY appreciated.. (using tinypaste just cause it's long)开发者_如何学Python

http://tinypaste.com/49e96

You could shorten your color code down and make it a bit easier to maintain, this would replace all the jQuery code you posted:

var colors = { 
  "home":"#43b1cc", 
  "transport":"#f6e572", 
  "landdev":"#fda882", 
  "environment":"#b6e578" 
};

$('#nav > li').hover(function() {
  var color = colors[$(this).attr("id")];
  if (color) $(this).parent().css('background-color', color);
}, function(){
  $(this).parent().css('background-color', '#000');
});

$('#nav #transport ul').hover(function() {
  $(this).prev('a').css('backgroundImage', 'url(images/nav_transport_on.png)');
}, function(){
  $(this).prev('a').css('backgroundImage', 'url(images/nav_transport_off.png)');
});

You can see a demo here, though of course the images won't work :)