I'm working with this jSFiddle.
My solution works but I need something which closes submenu after mouseout() currently it opens submenu item or when mouseout() submenu2 because when I'm out of submenu2 or I'm at next item I don't want to see previous submenu2.
Simply something like this:
if ($.submenu li.item152 == mouseout() || $.submenu2'.eq(0) == mouseout()){
$('.submenu2').eq(0).slideUp(600);}
How can i do that?
Thank you.
Try this .Hide all with mouseleave
$('.submenu li.item152').hover(function() {
$('.submenu2').eq(0).slideDown(600);
$('.submenu2').eq(1).slideUp(600);
});
$('.submenu li.item153').hover(function() {
$('.submenu2').eq(1).slideDown(600);
$('.submenu2').eq(0).slideUp(600);
});
$('.submenu2').mouseleave(function(){
$('.submenu2').slideUp(600);
});
.submenu2{
display: none;
}
.submenu li{
display: inline-block;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="submenu">
<li class="item152">
Item 152
</li>
<li class="item153">
Item 153
</li>
</div>
<div class="submenu2">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</div>
<div class="submenu2">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</div>
First of all you need to fix Your HTML li must be under ul tag then use hover function for toggle submenu:
$(".menu li").hover(
function() {
$('.submenu.'+ $(this).attr('class')).slideDown(600);
},
function() {
$('.submenu.'+ $(this).attr('class')).slideUp(600);
}
);
.submenu {
display: none;
}
.menu li {
display: inline-block;
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="menu">
<li class="item152">
Item 152
</li>
<li class="item153">
Item 153
</li>
</ul>
<ul class="submenu item152">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</ul>
<ul class="submenu item153">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</ul>
Try this, pure css solution:
ul.submenu li{
position:relative
}
.submenu2{
position:absolute;
top:20px;
left:0;
display: none;
list-style-type: none;
padding:0px
}
ul.submenu li:hover ul.submenu2{
display: block;
}
ul.submenu2 li:hover{
display: block;
top:10px
}
.submenu ul li{
padding-right: 10px;
}
.submenu li{
display: inline-block;
padding-right: 10px;
}
<ul class="submenu">
<li class="item152">
Item 152
<ul class="submenu2">
<li>submenu for item 152</li>
<li>submenu for item 152</li>
<li>submenu for item 152</li>
</ul>
</li>
<li class="item153">
Item 153
<ul class="submenu2">
<li>submenu for item 153</li>
<li>submenu for item 153</li>
<li>submenu for item 153</li>
</ul>
</li>
</ul>
Related
I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity
I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>
Okay so here is a cut down of what I have so far JSFiddle. Hovering over 'Aviation' brings down the menu. I would like it so that when you open the menu the first menu item is already set to active but also need the current hovered selection to stay selected when they move over the the "Related Links" side of the drop down.
I know very little JS but this is what I have come up with so far to make the menu appear.
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$(".aviation-menu").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("#top li").hover(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
});
Any help would massively be appriciated thank you.
I think you can use it like below, I gave the Jsfiddle link at the bottom as well:
$(document).ready(function() {
$(".aviation").hover(function() {
$(".aviation-menu").toggleClass("active");
});
});
$(document).ready(function() {
$("li").hover(function() {
$("li").each(function() {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
JSFIDDLE
Basically you will be removing all the "active" classes on the other list items when any of them gets hovered, so it will have one active all the time.
Edit: You can also add this $("li").first().addClass("active"); at the beginning so it will have "Home" as active by default.
You should consider the following: There is no "hovering" on mobile devices and what you're doing with JS (adding a class on hover, but actually what you want is a visual change) can be done with CSS, which is nicer in my opinion.
Here is a great example of a pure CSS dropdown menu by Phil Hoyt: http://codepen.io/philhoyt/pen/ujHzd
HTML:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
I created a dropdown menu and below is my snippet. The problem is whenever I tried to go to the dropdown part (the one that has a class of dropdown_menu) menu after I click the link that triggered it, it will slideUp which supposedly it will not as it is also inside with the .has_dp element, any ideas? Im wondering if the best solution is to bind the .dropdown_menu element with the mouseleave event of the .has_dp so that the .dropdown_menu will only slideUp if the cursor is not over on the .has_dp and .dropdown_menu, is that possible?
$(document).ready(function(){
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function(){
$(".dropdown_menu", this).slideDown();
}).mouseout(function(){
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li{
float: left;
list-style: none;
}
#topnav li a{
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span{
float: left;
display: block;
}
#topnav li a span:first-child{
margin-right: 3px;
}
#topnav li a span:last-child{
padding-top: 2px;
}
#topnav li a.active_menu, #topnav li a:active, #topnav li a:hover{
color: blue;
}
/* dropdown */
.dropdown_menu{
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li{
clear: both;
float: none;
}
.dropdown_menu a{
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
The problem is the nature of mouseout event which is bubbled.
You need to use mouseleave instead of mouseout
$(document).ready(function() {
//main declarations
$(".thehide").hide();
//dropdown menu
$(".has_dp").click(function() {
$(".dropdown_menu", this).slideDown();
}).mouseleave(function() {
$(".dropdown_menu", this).slideUp();
});
});
/* navigation */
#topnav {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#topnav li {
float: left;
list-style: none;
}
#topnav li a {
display: block;
padding: 5px 8px;
color: red;
text-transform: uppercase;
}
#topnav li a span {
float: left;
display: block;
}
#topnav li a span:first-child {
margin-right: 3px;
}
#topnav li a span:last-child {
padding-top: 2px;
}
#topnav li a.active_menu,
#topnav li a:active,
#topnav li a:hover {
color: blue;
}
/* dropdown */
.dropdown_menu {
z-index: 999;
position: absolute;
background: #263238;
padding: 10px;
margin-top: 15px;
}
.dropdown_menu li {
clear: both;
float: none;
}
.dropdown_menu a {
clear: both;
float: none;
display: block;
padding: 5px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav extend clear" id="topnav">
<li>Home</li>
<li class="has_dp">
<span>Company</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>Company dropdown menu 1</li>
<li>Company dropdown menu 2</li>
<li>Company dropdown menu 3</li>
<li>Company dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>HR</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>HR dropdown menu 1</li>
<li>HR dropdown menu 2</li>
<li>HR dropdown menu 3</li>
<li>HR dropdown menu 4</li>
</ul>
</li>
<li>Assets</li>
<li>Employees</li>
<li class="has_dp">
<span>expenses</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>expenses dropdown menu 1</li>
<li>expenses dropdown menu 2</li>
<li>expenses dropdown menu 3</li>
<li>expenses dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>PERFORMANCE</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>PERFORMANCE dropdown menu 1</li>
<li>PERFOMANCE dropdown menu 2</li>
<li>PERFORMANCE dropdown menu 3</li>
<li>PERFORMANCE dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>recruitment</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>RECRUITMENT dropdown menu 1</li>
<li>RECRUITMENT dropdown menu 2</li>
<li>RECRUITMENT dropdown menu 3</li>
<li>RECRUITMENT dropdown menu 4</li>
</ul>
</li>
<li>reporting</li>
<li class="has_dp">
<span>self service</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>SELF SERVICE dropdown menu 1</li>
<li>SELF SERVICE dropdown menu 2</li>
<li>SELF SERVICE dropdown menu 3</li>
<li>SELF SERVICE dropdown menu 4</li>
</ul>
</li>
<li>timesheets</li>
<li>Timeoff</li>
<li class="has_dp">
<span>training</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>training dropdown menu 1</li>
<li>training dropdown menu 2</li>
<li>training dropdown menu 3</li>
<li>training dropdown menu 4</li>
</ul>
</li>
<li class="has_dp">
<span>more</span><span class="mdi-navigation-arrow-drop-down"></span>
<ul class="dropdown_menu extend clear thehide">
<li>more dropdown menu 1</li>
<li>more dropdown menu 2</li>
<li>more dropdown menu 3</li>
<li>more dropdown menu 4</li>
</ul>
</li>
</ul>
I am working on project where I have created MegaMenu, which I am fetching from JSON file. Written simple logic of HTML Structure.
#menu { border:solid 2px green; float:left;}
#menu ul { padding:0; margin:0; clear:both; float:none;}
#menu ul li {padding-bottom:5px; color:green; float:left; list-style:none; width: 20%;}
li a { color:green;}
#menu ul li li {float:none;}
li li a { color:blue;}
<div id="menu">
<ul>
<li>Nav Item 1
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 2
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 3
<ul>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 4
</li>
<li>Nav Item 5
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 6
</li>
<li>Nav Item 7
<ul>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 8
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 9
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Nav Item 10
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
</ul>
</div>
Problem: I am getting wearied output. Click on Run Code Snippet button. I found that, List items are not properly aligned.
Desired Output: I want to align list items properly aligned. I want Item 6 would be appear after Item 1, and there will be no white space.
Is it possible to achieve this without using JavaScript of jQuery?
you need to add this as well
#menu >ul>li {
padding-bottom:5px;
color:green;
float:left;
list-style:none;
width: 20%;
height:250px
}
Demo
You can use Below CSS:
#menu {
border: solid 2px green;
float: left;
}
#menu ul {
padding: 0;
margin: 0;
clear: both;
float: none;
}
#menu ul li {
padding-bottom: 5px;
color: green;
float: none;
display: inline-block;
list-style: none;
width: 20%;
}
li a {
color: green;
}
#menu ul li li {
float: none;
display: block;
}
li li a {
color: blue;
}
I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File