I'm trying to come up with a way to make a drop down box that is displayed through a jquery mouse hover event and with nested dropdown boxes displayed through hovering over elements of the original drop down box. I wrote some terribly inefficient code and I'm struggling to find ways of simplifying it. If anyone has any suggestions that will help me shorten this code and get a better idea of how to take advantage of functions of JQuery, please help.
here is the link:
http://cs-dev.dreamhosters.com/dropd.php
$(document).ready(function(){
$(".tab, .drop").hover(function(){
$(".tab").css("color","#FF7722");
$(".drop").css("display","block");
$("#tv, .droptv").hover(function(){
$(this).css("color","#FF7722");
$(".droptv").css("display","block");
$(".droptv").hover(function(){
$("#tv, .droptv").css("color","#FF7722");
},function(){
$(".droptv").css("color","#005BAB");
});
},function(){
$(this).css("color","#005BAB");
$(".droptv").css("display","none");
});
$("#interact").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#online").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#vod, .dropvod").hover(function(){
$(this).css("color","#FF7722");
$(".dropvod").css("display","block");
$(".dropvod").hover(function(){
$("#dai").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#iguide").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#vod").css("color","#FF7722");
},function(){
$(".dropvod").css("color","#005BAB");
});
},function(){
$(this).css("color","#005BAB");
$(".dropvod").css("display","none");
});
$("#tablet").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#mobile").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
},function(){
$(".tab").css("color","#005BAB");
$(".drop").css("display","none");
});
});