We Keep Coding

jQuery close current submenu after mouseout() menu or submenu

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>

Expand/collapse a menu list animated and only with CSS

Here's what I'm trying to make:
Click on "PORTFOLIO";
Pushes everything down smoothly;
New links fade-in smoothly;
Click on "PORTFOLIO" again, do everything in reverse;
My current code;
$(function () {
$('[data-toggle]').on('click', function () {
var id = $(this).data("toggle"),
$object = $(id),
className = "open";
if ($object) {
if ($object.hasClass(className)) {
$object.removeClass(className)
} else {
$object.addClass(className)
}
}
});
});
#list {
display: none;
}
#list.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home </li>
<li>A Empresa </li>
<li>Portfolio
<ul id="list">
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato </li>
</ul>
</nav>
It's possible to accomplish this without JS, only with CSS? I have no clue whatsoever how to do the animation part, I tried CSS Transitions propriety, but didn't work.
Also, any tips for the markup and JS? I don't thinks I'm doing it the "right way"... any tips would be appreciated.

With only CSS you may use :focus and eventually pointer-events if you want a toggle effect :
#list {
max-height: 0;
overflow: hidden;
transition: 0.5s linear;
}
a:focus+#list {
max-height: 15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}
<nav>
<ul>
<li>Home </li>
<li>A Empresa </li>
<li>Portfolio
<ul id="list">
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato </li>
</ul>
</nav>
You can even do this very little CSS without class nor id :
ul a +ul {
max-height:0;
overflow:hidden;
transition:0.5s linear;
}
ul a:focus + ul {
max-height:15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}
<nav>
<ul>
<li>Home
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>A Empresa
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li><a href="#nowhere" >Portfolio</a>
<ul>
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</nav>

I have created the menu only using css please check the following fiddle https://jsfiddle.net/dwgpqncw/2/ also the code for the same is posted below
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css menu</title>
<style>
*{margin:0; padding:0;}
ul{font-family:Arial, Helvetica, sans-serif;}
ul li ul{height:0px; transition:500ms all;-webkit-transition:500ms all;-moz-transition:500ms all;-o-transition:500ms all;overflow:hidden;}
ul li ul li{ transition:1300ms all;-webkit-transition:1300ms all;-moz-transition:1300ms all;-o-transition:1300ms all;opacity:0}
a{color:#000; text-transform:uppercase;}
ul li ul li a{color:red;}
/*set the height to 0 and on focus set the height to pixels calculation based on the line height*/
ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1){height:0px;overflow:hidden;}
ul li ul li{line-height:30px;font-size:16px;}
ul li .expandable{font-size:20px; line-height:35px; text-decoration:none; padding-left:20px; }
ul li .expandable:hover{text-decoration:underline;}
ul li ul li:before{padding-left:20px; content:"-"; font-size:16px; margin-left:20px}
ul li .expandable:focus{color:red;}
ul li .expandable:focus +ul:nth-child(1){height:90px;}
ul li .expandable:focus +ul:nth-child(2){height:120px;}
ul li .expandable:focus +ul:nth-child(3){height:60px;}
ul li .expandable:focus +ul:nth-child(4){height:120px;}
ul li .expandable:focus +ul:nth-child(1) li,ul li .expandable:focus +ul:nth-child(2) li,ul li .expandable:focus +ul:nth-child(3) li,ul li .expandable:focus +ul:nth-child(4) li{opacity:1;}
</style>
</head>
<body>
<ul>
<li>
Home
<ul>
<li>Home link 1</li>
<li>Home link 2</li>
<li>Home link 3 </li>
</ul>
</li>
<li>
A Empressa
<ul>
<li>Empressa link 1</li>
<li>Empressa link 2</li>
<li>Empressa link 3 </li>
<li>Empressa link 4 </li>
</ul>
</li>
<li>
Protfolio
<ul>
<li>Protfolio link 1</li>
<li>Protfolio link 2</li>
</ul>
</li>
<li>
Contato
<ul>
<li>Contato link 1</li>
<li>Contato link 2</li>
<li>Contato link 3 </li>
<li>Contato link 4 </li>
</ul>
</li>
</ul>
</body>
</html>

Using li:hover is not showing div when the list item is an anchor

I'm having an issue with my drop down menu. I am trying to have the end result look similar to BestBuy.com's navigation. The code is below along with more explanation at the end.
<div class="navbar">
<ul>
<li>Products
<div class="secondlevel">
<ul>
<li>Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Test Link</li>
</div>
and my CSS:
body {
font-family:sans-serif;
background: #eee;
}
.navbar {
background:lightblue;
width: 100%;
padding:0;
}
.navbar ul {
list-style:none;
padding:0;
margin:0;
}
.navbar ul>li {
display:inline-block;
}
.navbar ul li ul>li {
display:block;
}
.secondlevel {
position:absolute;
width:350px;
height:477px;
background:#fff;
padding:0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position:absolute;
width:350px;
height:477px;
background:lightgreen;
left:350px;
border: 1px solid #c3c4c4;
top:-1px;
}
.thirdlevel.two-columns {
width:700px;
}
.thirdlevel div:first-child {
position:absolute;
left:0;
}
.thirdlevel div {
position:absolute;
right:0;
}
.column {
width:350px;
}
.thirdlevel {
display:none;
}
.secondlevel {
display:none;
}
.navbar li:hover > div:first-child {
display:block;
}
.active {
display:block;
}
The problem I'm having is that when I try to turn the list items into links with: <li><a>Products</a><li>
When I do that, hovering over the element no longer works.
Also, the hover effect doesn't work in IE either. I'm guessing that's because I'm using li:hover.
I was attempting to use jQuery for the hover effect, and I would really like to since I've read that it's better for what I need to do, but my knowledge is limited in that department.
From what I researched I could use something like this:
$(document).ready(function () {
$(".main-nav-item").hover(function () {
$(".secondary-menu").toggleClass("active");
$(".tertiary-menu").toggleClass("hide");
});
});
Of course those classes don't line up with what I have, but that's the gist of what it is. The problem I had with that was I couldn't get it to work on only one child. Hopefully that's the right word. For example: When I hovered over my first <li> it would open all of the submenus. The way it is right now is perfect, except for the fact that nothing can be a link, which is kind of important.
Let me know if you need anymore information.

Try Making the links in the <li><a>Link</a></li> in to block Elements
a { display:block; }
did the trick for me
EDIT (Went Through you Problem)
Does this what you are asking for ..
$(document).ready(function() {
$(".main-nav-item a").hover(function() {
$(".secondlevel").addClass("active");
$(".thirdlevel").addClass("hide");
});
$(".secondlevel").hover(function() {
$(".thirdlevel").addClass("active");
});
});
body {
font-family: sans-serif;
background: #eee;
}
.navbar {
background: #FFE;
width: 100%;
padding: 0;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
.navbar ul>li {
display: inline-block;
}
.navbar ul li ul>li {
display: block;
}
.secondlevel {
position: absolute;
width: 350px;
height: 477px;
background: #fff;
padding: 0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position: absolute;
width: 350px;
height: 477px;
background: #AABC34;
left: 350px;
border: 1px solid #c3c4c4;
top: -1px;
}
.thirdlevel.two-columns {
width: 700px;
}
.thirdlevel div:first-child {
position: absolute;
left: 0;
}
.thirdlevel div {
position: absolute;
right: 0;
}
.column {
width: 350px;
}
.thirdlevel {
display: none;
}
.secondlevel {
display: none;
}
.navbar li:hover > div:first-child {
display: block;
}
.active {
display: block;
}
a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<ul>
<li class="main-nav-item">
Products
<div class="secondlevel">
<ul>
<li>
Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</div>
</li>
<li>Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1
</li>
<li>Testing 2
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Testing 3
</li>
<li>Testing 4
</li>
</ul>
</div>
</li>
<li>Test Link
</li>
</ul>
</div>

Have your tried <li>EXAMPLE</li>? As for the IE side of things, I would recommend using IE specific styling or if you haven't already, used CSS Reset, for a start. Do you have a working example?

Submenu disappears as soon as I reach it with a mouse

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

jQuery submenu won't show up

Using the following code I could get the ABOUT and FAQ submenus to show up but nothing would appear on mouse hover and I have no idea why. Please help! If there is more code I should show just let me know! Thanks in advance for any help :)
The HTML:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations</li>
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities</li>
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
<li>Reservations</li>
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</ul>
The CSS:
.navigation {margin:0; padding:0;list-style:none; }
.navigation li {
float:left;
width:120px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
overflow: visible;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}`
The Javascript:
$(document).ready(function() {
// Navigation function
$('.navigation li').hover(function () {
$('ul', this).fadeIn();
},
function () {$('ul', this).fadeOut();}
);
jsFiddle

The li elements for Accommodations, Activities and Reservations didn't correctly nest the submenu's ul elements. Check out the code in this JS Fiddle for a corrected version:
http://jsfiddle.net/9NdZC/
Here is just the HTML part:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
</li>
<li>Reservations
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
</li>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</li>
</ul>