All works as programmed. You have two levels of menu, first level is horizontal, the second is vertical. By some reason, your "Bookmarks" item is permanently highlighted and sub-menu is shown. I don't think this is what you meant to do, but let's ignore it for now.
Your question is about "Books". Indeed, when you hover on this element, sub-menu fades in, when you hover out, it fades out. It's not "sudden". The function
.hover() invoke the function in first argument when mouse goes inside the element, and the function in second argument when the mouse goes out. This is exactly what happens.
These is nothing to "fix" here. The "fix" could be applied to the code which fails at certain point. In your case, there is not code which would potentially do something useful. This is incomplete code with some exercises tried. (All those incomplete
href="#", etc...) Now, you need a plan on what do you want to achieve and how. First of all, the idea of using
$('#book') (
id selector) is wrong. Of course it works, but is it what you want? Do you understand that all
id values should be unique on the page? Your effects for "Books" will only work for "Books".
So, you need to use some other selector. You can select all first-order children of the main menu, or select all element of some CSS class. As the simplest solution, use this: add some distinct CSS class to all top-level menu items and use
class selector:
http://api.jquery.com/class-selector/[
^].
See also:
http://api.jquery.com/category/selectors[
^].
Your idea of hiding second level of menu also does not work with
.hover() in any useful way. You complained that the child menu hides out. But how can it stay visible, if, to point to any of the second-level menu items with the mouse you have to move the mouse pointer out of "Books", which causes hiding it out? The whole idea is wrong.
One simple approach wold be this:
<!--
<ul class="main_menue" id="main">
<li><a href="#">Home</a></li>
<div class="hider">
<li><a href="#">Books</a>
<ul class="sub_menu">
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">V.B</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
</div>
<!--
</ul>
<!--
I added the element
<div> with the class "hider" (for simplicity of the example, you can choose some structural selector) to be a target of hover events:
<script>
$(document).ready(function($) {
$('#con').addClass('con');
sub1 = $(".submenu");
sub1.hide();
$(".hider").hover(function() {
/* Stuff to do when the mouse enters the element */
sub1.fadeIn('slow');
}, function() {
/* Stuff to do when the mouse leaves the element */
sub1.fadeOut('slow');
});
});
</script>
I also reused your selector which used "#sub1" (see the variable
sub1) and replaced the selector to the class selector.
Now it works: the menu items only hides out when your mouse pointer moves out of the whole block (
div) which is a parent of the top-level menu item and all its sub-items. This is just to give you the idea, not a solution. As I already told you, to make it a solution, you need to accurately design and implement whole thing.
—SA
Submit an article or tip