We Keep Coding

How to change submenus of menu to the bottom of each parent

i have a menu that contains 3 levels . it works good and show the both 2 first level.
but not shows the third level because i define overflow in second level to show it with a scroll bar.
my question : is there a way to keep the scroll bar of without hide the 3rd level.
if not how can i show the 3rd level at bottom of each parent when hovered?
here is my snippet:
#menuindez{width:17%;height:100%;position:fixed;z-index:999999;top:0px;height:100%;position:fixed;top:0px;right:0;z-index:1001;}
#menuindez2{border-top:5px solid #d3b564;height:100%;position:relative;padding:20px 0 0;width:98%;margin:0 auto}
.menuindex.hvr-bounce-to-left > a{width:270px;display:block;clear:both;text-align:center;padding:8px 0;margin:0;font-size:17px;}
ul.css3menu1, ul.css3menu1 ul, ul#css3menu2, ul#css3menu2 ul, ul.css3menu1 ul ul{margin:0;list-style:none;padding:0;border-width:0;border-style:solid;font-size:17px;}
ul.css3menu1 ul, ul#css3menu2 ul, ul.css3menu1 ul ul{top:0px;font-size:17px;cursor:pointer;visibility:hidden;position:absolute;right:200%;}
ul.css3menu1 li:hover>ul, ul#css3menu2 li:hover>ul{visibility:visible;}
ul.css3menu1 li, ul#css3menu2 li{font-size:16px;transition:all 0.66s !important;position:relative;display:block;white-space:nowrap;font-size:0;}
ul.css3menu1 li:hover, ul#css3menu2 li:hover{font-size:17px;z-index:1;}
ul.css3menu1 ul ul, ul#css3menu2 ul ul{position:absolute;right:200%;}
ul.css3menu1>li:hover>ul, ul#css3menu2>li:hover>ul, ul.css3menu1>li ul li:hover>ul{font-size:17px;right:100%;width:250px;z-index:9999999;background:#031430}
ul.css3menu1 ul li:hover>ul{font-size:17px;right:100%;}
ul.css3menu1{width:100%;font-size:17px;font-size:0;z-index:999;position:relative;display:inline-block;padding:0;margin-top:0px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;float:right;}
ul.css3menu1>li{margin:0;}
ul.css3menu1 a:active, ul.css3menu1 a:focus{outline-style:none;font-size:17px;}
ul.css3menu1 a{display:block;vertical-align:middle;text-decoration:none;font:15px Trebuchet MS;color:#fff;cursor:default;padding:8px 0;text-align:center;background-repeat:repeat;border-width:0px;border-style:none;transition:margin 0.44s;}
ul.css3menu1 ul li, ul.css3menu1 ul li ul li{height:35px;transition:margin 0.44s;float:none;margin:0px 0 0;border-bottom:1px solid #010B1B;}
.car-brand{width:100%;float:right;box-sizing:border-box;direction:rtl;height:457px;overflow:auto;}
.car-list{width:75%;float:left;overflow:hidden;position:relative;padding-bottom:20px;}
.car-brand-item{height:43px;line-height:43px;font-size:14px;border-bottom:none;padding-right:10px;cursor:pointer;}
.car-brand-img{width:43px;height:43px;float:right;margin-left:10px;direction:rtl;text-align:center;vertical-align:middle;display:table-cell;}
.car-brand-img img{position:relative;top:4px;}
.car-brand-item:hover a{font-size:17px;font-family:'W_yekan';color:#78c8e4;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.aysham.com/js/menu.js"></script>
<div id="menuindez" style="background:green;" >
<div id="menuindez2">
<div class="menuindex hvr-bounce-to-left">
<ul class="css3menu1 topmenu">
<li class="topmenu hvr-bounce-to-left"><a href="">
<h1>Level 1</h1>
</a>
<ul>
<div id="car-brand-list">
<div class="car-brand mCustomScrollbar" id="content-1" style="position:relative;" >
<li>
<div class="car-brand-item" data-id="26709"> Level2</div>
<ul>
<li >
<div class="car-brand-item" data-id="34310"> Level3</div>
</li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>

You can use plain old CSS for the hover on the 3rd level by using the nth-child-selector. See below as an example:
.car-brand-item:nth-child(3){ display:block }
Or you can use the index property and get the 3rd index in js.
document.getElementsByClassName('car-brand-item')[2];

$(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>

Javascript to make dropdown menus on hover state - no hard-coding in HTML

Thanks in advance. I have actually tried several javascript scripts to get this to work and none have, but my understanding of javascript is pretty rudimentary.
I cannot adjust the code of the link itself - it is being generated. But it is generated with an id and a class. I would like to have a script in the document that references the link's id so that when the user rolls over the link, a hidden ul (or div) appears - like a normal css navigation dropdown but, again, i cannot alter the code of the actual links. I can only alter the CSS in general.
Is there javascript that can do this? I can do query..
Thank you again!
bb

Here i have done drop down menu using HTML and CSS only, which show/hide on menu link hover state.
HTML:
<div id="menu1" class="menu">
<a href="#" id="link1">
Menu-1
</a>
<div id="menulist1" class="menulist">
<div>
Option1
</div>
<div>
Option2
</div>
<div>
Option3
</div>
<div>
Option4
</div>
<div>
Option5
</div>
</div>
</div>
<div id="menu2" class="menu">
<a href="#" id="link2">
Menu-2
</a>
<ul id="menulist2" class="menulist">
<li>
Option1
</li>
<li>
Option2
</li>
<li>
Option3
</li>
<li>
Option4
</li>
<li>
Option5
</li>
</ul>
</div>
CSS:
.menu{
font-size:15px;
display:inline-block;
margin:0px;
padding:0px;
}
.menu a{
display:block;
width:120px;
text-align:center;
background-color:#2211ce;
color:#dccb00;
text-decoration:none;
}
#menulist1{
position:absolute;
top:33px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menulist2{
position:absolute;
top:20px;
border:1px solid #113399;
background-color:#88a5ff;
display:none;
}
#menu1:hover #menulist1{
display:block;
}
#menu2:hover #menulist2{
margin-top:13px;
display:block;
}
.menulist div{
margin-left:0px;
padding:3px;
width:112px;
}
.menulist li{
list-style:none;
width:72px;
padding:3px;
margin-left:0px;
display:block;
}
.menulist div:hover,.menulist li:hover{
background-color:#1155ac;
color:#dccb00;
}
I have also done bins for above example, please click on http://codebins.com/codes/home/4ldqpbo

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.

2 column layout for submenus

I am trying to create sort of Jquery Ui megamenu's or even suckerfish style. But can not use them as a plugin in my code.
I have a 2 column layout in my sub menus. How do I tweak the existing code to show it in a 2 column layout? Here's my jsfiddle.
To my understanding, i will have to play a lot with css in this. As I tried doing it by having 2 Unordered list in the main list and gave float right and left consecutively and used clear both.
As you can find that one column already exists.the other column would be dynamically updated through ajax call.
Any help would be appreciated.

Here's a simple demo:
http://jsfiddle.net/brvX3/11/
html:
<ul>
<li>Menu item
<div style="display:none">
<ul>
<li>Menu2 item1</li>
<li>Menu2 item1</li>
</ul>
<ul>
<li>Menu2 item2</li>
<li>Menu2 item2</li>
</ul>
</div>
</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
CSS:
body {
font-family:arial;
font-size:10px;
}
ul, li {
margin:0;
passing:0
}
ul > li {
float:left;
position:relative;
}
ul li a {
display:block;
padding:3px;
width:80px;
background-color:#e0e0e0
}
ul div {
position:absolute;
width:180px;
background-color:#e0e0e0
}
ul ul {
float:left;
width:90px
}
ul li a:hover > div {
display:block;
}
JS:
$("ul a").hover(
function(){ $(this).next().show() },
function() { $(this).next().hide() }
);
$("ul div").hover(
function(){ $(this).show() },
function() { $(this).hide() }
)