We Keep Coding

How to put menu after other instead of over each other

I have 3 menus in 3 different location on a website that they translate to one mobile toggle menu on phone.
My problem on mobile the 3 menus are showing up in the toggle panel but one over the other instead of one after the other. I define that this is a menu in my html using .main-nav
I tried appending .main-nav again but it doesn't work, I tried giving each menu a top margin in css it shows but along with its background.
live example - here how it is on codepen https://codepen.io/anon/pen/VOeKpE
I want all 3 menus in the website to show the links one after the other instead of over each other now.
if ($('.main-nav').length) {
var $mobile_nav = $('.main-nav').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="fa fa-bars"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('.mobile-nav-overly').toggle();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="main-nav float-right d-none d-lg-block">
<ul>
<li>home</li>
<li>about</li>
</ul>
</nav>
how it looks now
now
desired result
result needed

You could either use
li { display: inline-block }
Or
li { float: left;}
in your css.
the <li> element is by default styled with the display: block property. meaning it behaves similarly to an element like <p> or <div>, taking up the whole width of the content.
Changing this display property to inline-block ensures you still have the same functionalities you would also have with display: block but the elements will from now on only take up as much space as they need.

Trying to keep parent nav active whilst scrolling through sub nav

I have small issue that I'm sure will be very straight forward to figure out just can't get it to work.
I'm working on site and can't seem to get the parent nav to stay highlighted whilst I scroll through the sub menu.
Hover over 'The Event' and then down through sub nav 'Key Facts' Etc you will see what I mean, the parent link goes back to white and I want it to remain #af5030 whilst scrolling down.
Any ideas how I can resolve this?
Thanks,
Jamie

You're only changing the color of the a element when the a element is hovered, you need to also change the color of the a element when the li element is hovered.
css
a:hover {
color: blue;
}
li:hover a {
color: blue;
}
html
<ul>
<li> // nav item
link
<ul> // dropdown content
<li></li>
...
</ul>
</li>
...
</ul>

#globalnav li:hover a{
color: red;
}
You are hovering the parent li then the a needs to take a style based on this.

how to remember the active menu

I have a menu with sub menu(vertical). My first li is active with the sub menu because i'm in the current page but My problem is when I hover in the next li I have the sub menu display it but if i lost the active li when i quits the menu
What I need is:
when my cursor is not hovering in my menu, i need the default sub menu that has the on class
This what i look do it
enter link description here
this link of my code in FIDDLE
enter link description here

I've changed your css so you don't need any js now.
It works this way:
In normal state an element with .on class is displayed;
When you hover #menu then we hide all the .niveau2 elements
When you hover some tab then we show only its .niveau2 element by adding an !important keyword to display property.
#menuu ul li:hover ul{
display: inline-block !important;
}
#menuu ul:hover .niveau2 {
display: none;
}
#menuu .on {
display: block;
}
Here is an example with my changes: http://jsfiddle.net/bymb6kvm/14/

"touch and feel" at custom HTML drop down menu

I made a custom drop down menu on a HTML page + JavaScript. I want that menu to act as following:
When the button "Freunde" gets clicked, the drop down menu appears
When the button gets clicked again, the drop down menu disappears
When the mouse curor leaves the "area" of button + drop down menu, it disappears
The drop down menu consists of a main div with multiple divs in it (the "menu items").
My first approach was to put a onmouseout() on the main div of the drop down menu, but there is following problem: As soon as I hover over an inner div, the onmouseout() is true, and since the inner divs fill the entire main div, the drop down menu is visible only as long as the user doesn't hover over it.
So I tried it to solve similiarly like a JQuery lightbox, namely to put a "background" div over the whole screen and paste the drop down menu in there, and set the onmouseover() there. That would be almost perfect, but the "Freunde" button is also affected from that.
So is there any way to combine an event from different elements? Like
if(cursor is not over Button && cursor is not over DDMenu) set invisible
I marked the desired are in following image

Assuming you're set up as
<ul>
<li></li>
<li></li>
</ul>
You could set up your CSS like this:
#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }
And then set up your JS like this:
var menuClick = function() {
$(this).toggleClass('active');
menuHover();
};
var menuHover = function() {
$('#nav li.active').hover(function() {
}, function() {
$(this).removeClass('active');
});
});
$('#nav > ul > li').on('click', menuClick);
Granted, this is absolutely gross coding, but I think it should work. (this also assumes you're using the jQuery library).

Hide Div When Clicked

I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?

Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.

You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});

Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.

Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.