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)

No correct solution


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 = { 

$('#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 :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow