Q:

Custom Jquery css drop menu issues

I am developing a custom dropdown menu with jquery and css. I have applied the concept of fadein and fadeout. 
Being new to jquery, i am not able to figure out what to do next.
I've seen most of dropdown issues on web but none of them address my problem.

My Problems:
1. Whenever I move the cursor from menu1 to menu2, the hovered div fades-out and in. I want it to remain stable.
2.When I take the cursor to hovered div, it grayscales all previously hovered menu options. I want it to grayscale only the current menu option. 
Link to the fiddle
$("#menubar ul li").hover(function(){
var grey=$(this);
grey.find(".meicon").css("-webkit-filter","grayscale(1)");
var cat = $(this).text();
$("#menucont").text(cat);
$("#menucont").fadeIn().css("display","block");
$("#menucont").css("left", function(){
 return ($("body").width() - $(this).width()) / 2;
});

//menucount hover event
$("#menucont").hover(function(){
$("#menucont").css("display","block");
grey.find(".meicon").css("-webkit-filter","grayscale(1)");
},
function(){
$("#menucont").css("display","none");
$(".meicon").css("-webkit-filter","grayscale(0)");
}); 

},
function(){
$(".meicon").css("-webkit-filter","grayscale(0)");
$("#menucont").css("display","none");
});

I hope you understand my problem.
Sorry for my lame english.
Help is very much appreciated!

A:

Revision - updated all the code and fixed the issues mentioned.
Link to a demonstration
<div id="head">
 <div id="menubar">
   <div class="mblinks">
     <ul>
       <li>
         <a href="#"><div class="meicon"></div><span>Menu1</span></a>
       </li>
       <li>
         <a href="#""><div class="meicon"></div><span>Menu2</span></a>
       </li>
       <li>
         <a href="#"><div class="meicon"></div><span>Menu3</span></a>
       </li>
     </ul>
   </div>
 </div>
 <div id="menucont"></div>
</div>

.active {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}

$('#menubar ul li').hover(function() {

var cat = $(this).text()
$('.meicon').removeClass('active');
$(this).find($('.meicon')).addClass('active');

$('#menucont').html(cat).fadeIn().css('left', function() {
return ($('body').width()-$(this).width())/2;
});

$('#menucont').hover(function() {
$(this).show();
},
function(e) {getOut(e)});
},
function(e) {getOut(e)});

$('#menubar, #menucont').mouseleave(function(e) {getOut(e)});

function getOut(e) {
if (!e) var e = window.event;
var related = e.relatedTarget || e.toElement;
var entity = $(related).prop('tagName');
var target = $(related).attr('id');
if (entity !== 'HTML' && entity !== 'DIV') return;
$('#menucont').hide();
if (target == 'menucont') return;
$('.meicon').removeClass('active');
}

The issue with grayscale on the icons was solved by adding and removing a class.
Here's a version with some images and HTML5 data attribute functionality by the way :
http://codepen.io/anon/pen/PwvqGP
Hopefully this will solve all the questions.

