We Keep Coding

Make CSS Hover work when the element is hidden using javascript

I have a menu where there are the heading and the submenus. Whenever the user hovers over the heading, submenus show up.
And whenever any of the items in submenus is clicked, the submenu is set to hidden using Javascript. Now, when the user hovers over the menu, the submenus don't show up! Please help me to fix this.
function closesSan() {
document.getElementsByClassName('submenu')[0].style.setProperty('display', 'none', 'important');
}
#main:hover .submenu {
display: block!important;
}
<ul>
<li id="main">
List
<ul class="submenu" style="display: none;">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>

I had to write some additional code to get the desired result. Actually, the base problem in your code was important and property {both works same} in sense both get prioritized by code.
So to get rid of I have added an additional class on click and removing that class on every new hover. Hope it will satisfy the needs.
var main = document.getElementById("main");
main.onmouseover = function() {
document.querySelector('.submenu').classList.remove("displayNoneImp");
}
function closesSan() {
document.querySelector('.submenu').classList.add("displayNoneImp");
}
.submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
.displayNoneImp {
display: none !important;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li onclick="closesSan()">Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>

Since you don't use a pure CSS implementation, use event listeners and avoid using !important whenever possible:
var main = document.querySelector('#main');
var submenu = document.querySelector('.submenu');
var items = document.querySelectorAll('#main li');
main.addEventListener('mouseover', function () {
submenu.style.display = 'block';
});
main.addEventListener('mouseout', function () {
submenu.style.display = 'none';
});
items.forEach(function(item) {
item.addEventListener('click', function () {
console.log('clicked on:', item)
submenu.style.display = 'none';
});
});
.submenu {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu">
<li>Bacon</li>
<li>Tuna</li>
<li>Chicken</li>
</ul>
</li>
</ul>
When Using !important is The Right Choice

You can try something simple like this:
function closesSan() {
document.getElementsByClassName('submenu')[0].classList.add("hide");
setTimeout(function() {
document.getElementsByClassName('submenu')[0].classList.remove("hide");
},100)
}
#main .submenu {
display: none;
}
#main:hover .submenu {
display: block;
}
#main .submenu.hide {
display: none;
}
<ul>
<li id="main">
List
<ul class="submenu" >
<li onclick="closesSan()" >Bacon</li>
<li onclick="closesSan()">Tuna</li>
<li onclick="closesSan()">Chicken</li>
</ul>
</li>
</ul>

use visibility instead of display
visibility: hidden;
save those kittens

Get closest div inside clicked <li>

I'm trying to get the closest DIV inside a li item, to apply a new class:
<ul id="menu">
<li class="here">
<img src="image">
<div class="border selected"></div>
</li>
<li class="here">
<img src="image">
<div class="border"></div>
</li>
.....
I wanted to be able to click inside the li tag and apply the class 'selected' to the div that already has class border.
I was trying to use .closest and .find but I couldn't get the good result.
Is there any recommendation? Thanks!
EDIT: https://jsfiddle.net/a8pm1aj7/

Please look at this jsfiddle.
The relevant code is:
$("#menu li").on("click", function(){
$("#menu li div.border").removeClass("selected");
$(this).find("div.border").addClass("selected");
});
This code removes the .selected class from all previously selected elements.
If I understand your question correctly, this should work for you.

.children() seems to work fine.... You may have more of an issue with CSS hierarchy. Make certain the selected class is defined after the border class in the CSS.
$(document).ready(function() {
$( '.here' ).on('click', function() {
var theDiv = $(this).children('.border');
$('.border').not(theDiv).removeClass('selected');
$( theDiv ).toggleClass('selected');
});
});
li { display: block; margin: 10px; width: 80%; }
.border { height: 20px; background: #eee; }
.selected { background: #fee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li class="here">
Text/image
<div class="border"></div>
</li>
<li class="here">
Text/image
<div class="border"></div>
</li>
</ul>
Updated your fiddle and fixed issues with it.
- You had the div positioned absolute and set at 100% width and 100% height. S0 basically, it was the size of the window. Actually linked the jQuery library to the fiddle.

jQuery dropdown menu in same div

I want to show drop down menu on mouseover. Now I am using 2 divs and use slideup to show another div for sub menu; I want to show sub menu using 1 div on mouseover. How can I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
});
$("#flip").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
}
#panel {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="flip">
<ul>Home</ul>
</div>
<div id="panel">
<ul>Sub
</br>
Sub
</br>
Sub
<ul>
</div>
</body>
</html>
`

A nested unordered list would work, something like this:
<ul id="flip">
<li>Home
<ul id="panel">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
In CSS, all you would need is to hide your sub-menu:
#panel {
display:none;
}
jQuery is the same as you had it.
See here: http://jsfiddle.net/kaizora/23uuL/
PS: If you are using a <ul> tag, in valid HTML, there should be nothing else but <li> tags inside.

How about this:
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
$("#panel").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
Fiddle Here: http://jsfiddle.net/vWGsC/

If you want to you cold also use pure CSS.
<ul class="nav">
<li class="dropdown">
Home
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="dropdown">
second dropdown
<ul>
<li>...</li>
</ul>
</li>
</ul>
</li>
This would be the html from something I have saved some time ago.
Try it out! :)
http://jsfiddle.net/patrickhaede/dqxm4/

DEMO Background color is for clearly view for user.
var temp = $('#flip ul li:eq(0)').nextAll();
temp.hide();
$('#flip ul').mouseenter(function(event) {
temp.slideDown("slow");
});
$('#flip ul').mouseleave(function() {
temp.slideUp("slow");
});
#flip li , #flip ul { list-style-type: none; background-color: yellow;}
Home
Sub
Sub
Sub

$(this).find(..) alternative

I find my self doing this but not sure if this is the best way. Here an example.
<ul id="menubar">
<li><a class="menu_item">File</a>
<ul>
<li><a id="menu_file_new">New</a></li>
<li><a id="menu_file_open">Open</a></li>
</ul>
</li>
<li><a class="menu_item">Run</a>
<ul>
<li><a id="menu_run_preview">Preview</a></li>
<li><a id="menu_run_compile">Compile</a></li>
</ul>
</li>
</ul>
JQuery
$('.menu_item').hover(function(){
$(this).find('ul').show();
});
Just wondering is this the best way, find seems a bit overkill?
EDIT: I can't use css because of this: Fails in Opera/IE when an item is clicked/hover it fails in those two browsers. http://jsfiddle.net/cJsn2/1/ this is because of html standard.

You can do this with CSS only
.menu_item ul { display: none; }
.menu_item:hover ul {display: block; }
as for the JavaScript, it's fine, you can use $.children instead of $.find to traverse less nodes

This would be a simple hover script:
// I'm purposely using `toggleClass`, instead of show/hide, to
// have more flexibility with styling
$('.menu_item').each(function () {
var $li = $(this).closest('li');
$(this).hover(function () {
$li.toggleClass('hover');
});
});
with the following css:
ul ul {
display: none;
}
li.hover > ul {
display: block;
}
demo: http://jsbin.com/ehifod/1/

Try doing this with just css
the catch is that you're going to apply the "hover" on the li and not in the a
#menubar li ul{
display:none;
}
#menubar li:hover > ul{
display:block;
}
jsfiddle >

What you want to use is closest. It travels up the DOM-tree to find the first parent element matching the selector:
$('.menu_item').hover(function(){
$(this).closest('ul').show();
});
$(".menu_item").hover(function() {
$(this).next().show();
});

You can use CSS (this is under the assumption that the ul element is contained within the .menu_item element):
.menu_item:hover > ul {
display: block;
}
Demo: http://jsfiddle.net/maniator/cJsn2/
Using the following HTML:
<ul id="menubar">
<li class="menu_item"><a>File</a>
<ul>
<li><a id="menu_file_new">New</a></li>
<li><a id="menu_file_open">Open</a></li>
</ul>
</li>
<li class="menu_item"><a>Run</a>
<ul>
<li><a id="menu_run_preview">Preview</a></li>
<li><a id="menu_run_compile">Compile</a></li>
</ul>
</li>
</ul>

Menu Item Hover JavaScript

If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.
http://jamessuske.com/will/
I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.
This is my JavaScript:
<script type="text/javascript">
function showGalleryNav(){
document.getElementById('headerNavGallery').style.display = "";
}
function showInfoNav(){
document.getElementById('headerNavInfo').style.display = "";
}
function hideGalleryNav(){
document.getElementById('headerNavGallery').style.display = "none";
}
function hideInfoNav(){
document.getElementById('headerNavInfo').style.display = "none";
}
</script>
And The HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Info</li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li>William Ruppel</li>
<li>CV</li>
<li>Artist Bio</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div><!--headerNavInfo-->
I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with
$('#headerNavGallery").css("display", "");
also didn't work,
Any ideas would be greatly apperiated.

Actually what you are trying to accomplish is all css-only doable but not with that markup structure. First you need to nest your lists.
<ul class="menu">
<li>item 1</li>
<li>
item 2 with sub
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
... so on ..
</ul>
</li>
</ul>
some css
.menu li {
position: relative;
}
.menu li ul {
position: absolute;
top: 30px; /* the height of the root level item */
display: none;
}
.menu li li {
position: static; /* or you could float these for horizontal menu */
}
.menu li:hover ul {
display: block;
}
These are pretty much the basics. But I strongly suggest you go and study superfish menu as it's jquery drop drop menu but it degrades nicely with js off, so you could just study the css of it. http://users.tpg.com.au/j_birch/plugins/superfish/

Check that typeo, nvm...
Setting the display property should always have a value "none" or "block", empty("") is a bad reset... try this:
<script>
$(".galleryNavToggle").on("mouseenter mouseleave", function(event){
var headNavGal = $("#headerNavGallery");
if(event.type === "mouseenter"){
headNavGal.show();
}else if(event.type ==="mouseleave" &&
((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
$.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
headNavGal.hide();
}
});
$("#headerNavGallery").on("mouseleave", function(event){
var headNavGal = $(this);
if(event.type ==="mouseleave"){
headNavGal.hide();
}
});
</script>
HTML
<div class="headerNav">
<ul>
<li>Home</li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->
<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li>Categoies</li>
<li>Products</li>
</ul>
</div><!--headerNavGallery-->
AND CSS
.headerNav{
border:thin solid black;
float:left;
}
.headerNavGallery{
float:left;
border:thin solid black;
margin-left:-1px;
}

1) Gallery
You don't need to specify javascript:. This is redundant.
2) It is working exactly the way you programmied it to work. When you mouse-out, it disappears.
3) You have code for "headerNavInfo" but no matching HTML.