Develop Reference

Div is not correctly rendered on Safari 10.0.1 (like if there is an overflow:hidden somewhere but there isn't)

I have a sub-menu that shows when user hovers the main menu item. It works fine in all browsers except Safari (i have version 10.0.1).
I've looked deeply into the code but didn't find any solution. It seems like there is some kind of overflow issue somewhere but I'm not able to find where.
This is the expected behaviour on Chrome:
Working menu on Chrome
This is the result on Safari:
Issue on Safari
I did some research here on Stackoverflow but didn't find anything useful, mostly because I don't even know what keywords to use.
This is the website: http://stage.federicalotti.com/
Html code:
<div class="nav-wrap">
<nav id="nav">
<div class="container">
<div class="main-menu">
<ul id="menu-menu-principale" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-16">
<a href="http://stage.federicalotti.com/">
<span class="menu-text">Homepage</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
<a href="http://stage.federicalotti.com/biografia/">
<span class="menu-text">Biografia</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-24" class="no-link menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24">
<a href="#">
<span class="menu-text">Repertorio</span>
<span class="menu-arrow"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
<a href="http://stage.federicalotti.com/lista-brani/">
<span class="menu-text">Lista brani</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
<a href="http://stage.federicalotti.com/proposte-concertistiche/">
<span class="menu-text">Proposte concertistiche</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
<a href="http://stage.federicalotti.com/concerti/">
<span class="menu-text">Concerti</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48">
<a href="#">
<span class="menu-text">Media</span>
<span class="menu-arrow"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
<a href="http://stage.federicalotti.com/fotografie/">
<span class="menu-text">Fotografie</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
<a href="http://stage.federicalotti.com/audio-files/">
<span class="menu-text">Audio files</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
<a href="http://stage.federicalotti.com/riprese-video/">
<span class="menu-text">Riprese video</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
<a href="http://stage.federicalotti.com/rassegna-stampa/">
<span class="menu-text">Rassegna stampa</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
<a href="http://stage.federicalotti.com/news/">
<span class="menu-text">News</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
<a href="http://stage.federicalotti.com/contatti/">
<span class="menu-text">Contatti</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</div><!-- .main-menu -->
<div class="search-bar-mobile">
<div class="container">
<form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
<label>
<span class="screen-reader-text">Cerca:</span>
<input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
</label>
<input type="submit" class="search-submit" value="Cerca">
</form>
</div><!-- .container -->
</div><!-- .search-bar-mobile -->
</div><!-- .container -->
</nav>
<div class="search-bar">
<div class="container">
<form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
<label>
<span class="screen-reader-text">Cerca:</span>
<input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
</label>
<input type="submit" class="search-submit" value="Cerca">
</form>
</div><!-- .container -->
</div><!-- .search-bar -->
</div><!-- .nav-wrap -->
Sass code:
/*
* nav
*/
.nav-wrap {
perspective: 1000px;
}
#nav {
position: absolute;
background: #FFF;
left: 0;
top: 0;
height: 80px;
width: 100%;
border-top: 1px solid #f1f1f1;
z-index: 5;
box-shadow: 0 0 145px 0 rgba(0,0,0,0.17);
visibility: hidden;
opacity: 0;
transform: rotateX(-30deg);
transform-origin: top;
transition: 0.2s;
&.open {
visibility: visible;
opacity: 1;
transform: rotate(0);
}
}
.main-menu {
text-align: center;
> ul > li {
list-style: none;
display: inline-block;
line-height: 80px;
padding: 0 20px;
position: relative;
> a:link,
> a:visited {
display: block;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #000;
transition: 0.1s;
}
> a:hover {
color: $verde;
}
&.no-link {
> a:hover {
cursor: default;
}
}
> .sub-menu {
position: absolute;
background: transparent;
width: 320px;
padding: 2px 0;
top: 80px;
left: -10px;
display: none;
> li {
list-style: none;
display: block;
padding: 2px 0;
line-height: normal;
> a:link,
> a:visited {
display: block;
position: relative;
width: 100%;
background: #FFF;
color: #000;
letter-spacing: 1.2px;
font-size: 13px;
padding: 22px 30px;
box-sizing: border-box;
text-align: left;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.11);
opacity: 0;
transform: translateY(30px);
}
> a:hover {
color: $verde;
}
}
}
}
}
jQuery code (I'm using velocity.js):
qode = {
window: $(window),
html: $('html'),
body: $('body'),
nav: $('#nav'),
burgerWrap: $('.burger-wrap'),
searchBar: $('.search-bar'),
header: $('#header'),
wrapper: $('#wrapper')
};
/*
* Mouse enter animation
*/
qode.body.on('mouseenter', '.main-menu > ul > li', function(){
if ( qode.wrapper.width() > 1024 ) {
var self = $(this),
subMenu = self.find('> .sub-menu'),
elements = self.find('> .sub-menu > li a');
subMenu.stop().fadeToggle(0);
elements.stop().each(function(index){
$(this).stop();
$(this).velocity({
opacity: [ 1, 0 ],
translateY: [ 0, '30px' ]
}, {
delay: 75 * index,
duration: 200
});
});
} // if wrapper width
});
/*
* Mouse leave animation
*/
qode.body.on('mouseleave', '.main-menu > ul > li', function(){
if ( qode.wrapper.width() > 1024 ) {
var self = $(this),
subMenu = self.find('> .sub-menu'),
elements = self.find('> .sub-menu > li a');
$( elements.get().reverse() ).stop().each(function(index){
$(this).velocity({
opacity: [ 0, 1 ],
translateY: [ '30px', 0 ]
}, {
delay: 75 * index,
duration: 200,
complete: function(elems){
if ( elements.length === ( index + 1 ) ) {
subMenu.stop().fadeToggle(0);
}
}
});
});
} // if wrapper width
});

You're not setting the z-index on .open. I'm guessing in Safari it inherits in a different way?
&.open {
visibility: visible;
opacity: 1;
transform: rotate(0);
z-index:6; // Make sure the z-index is higher as the one of the page content.
}

Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)

Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}

Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.

Bootstrap responsive multi-level navigation menu

I have coded a multi-level navigation menu for bootstrap. It works well in 1200px and above. But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked.
For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again).
How can I achieve this?
This is the HTML:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li class="dropdown">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Offers/Fees <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Patients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li>Blog</li>
<li>Referrals</li>
<li>Contact</li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
The CSS:
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
#media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
#media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I made a JSFiddle for this:
https://jsfiddle.net/Lefosx46/

I took a look at your code. There's a lot going on, so while my answer should work there may be more efficient ways of doing it. It might at least point you in the right direction.
There seemed to be an issue with:
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
I removed that and added:
#media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/
Apologies if I've misunderstood your question!

How select only the first element of a list of elements with the same class name

I have the following code in jquery to display items for a sub menu:
$(document).ready(function(){
$(".menu > .menu-item").mouseenter(function(){
if($(this).has(".sub-menu").length){
$(".sub-menu",this).fadeIn(500);
$(".sub-menu",this).css("margin","0 40px");
$(".sub-menu",this).css("position","fixed");
$(".sub-menu",this).css("z-index","10");
}
})
.mouseleave(function(){
if($(this).has(".sub-menu").length){
$(".sub-menu",this).fadeOut(500);
}
});
});
It works fine when the sub menu element doesn't have other sub elements, but when I add a sub element both are displayed at the same time.
I want to display only the sub elements and if any sub element has more sub elements inside of it, display them as well only when the mouse is over the main sub element.
This is the code generated automatically when I add sub elements to the menu:
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">
Audiologia
<ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17">option1
<ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18">option2</li>
</ul>
</li>
</ul>
</li>
How can I do this?
Thank you very much for your time and help.

$(".sub-menu", this) will match sub-menus at any depth. If you just want the immediate children, use $(this).children(".sub-menu").
$(document).ready(function() {
$(".menu > .menu-item").mouseenter(function() {
if ($(this).children(".sub-menu").length) {
$(this).children(".sub-menu")
.fadeIn(500)
.css({
"margin": "0 40px",
"position": "fixed",
"z-index": "10"
});
}
})
.mouseleave(function() {
if ($(this).children(".sub-menu").length) {
$(this).children(".sub-menu").fadeOut(500);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12">
Audiologia
<ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-17">option1
<ul class="sub-menu" style="display: none; margin: 0px 40px; position: fixed; z-index: 10;">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18">option2
</li>
</ul>
</li>
</ul>
</li>
</ul>

To get a array of elements with the same classname in pure Javascript:
var elements = document.getElementsByClassName('className');
To get the first element with the specified classname above:
var element = elements[0];
If you wanted to get the second element it would be:
var element = elements[1];

Navigation Alignment Problems

Is it possible with css or maybe javascript/jQuery-manipulation to center some navigation items within the same div container, while other itmes in this container (last three) should be on the right edge of the navbar? I've tried it with flexbox and with inline-block/text-align center. I was able to center the whole div container. But when I moved the last three divs to the right, the remaining items stayed in their position. Based on the fact, that the three items now are on the right side, the width of the centered navbar changed and it should actually move a little bit to the right to be centered again.
Making new wrap elements around these centered and right side elements would be the last choice, since I am running on wordpress with php-menues. Therefore, changing the markup would maybe not so easy, like a simple css or javascript/jquery solution.
You may have a look at the fiddle below the posted markup to understand me better ;)
Default HTML-Markup:
<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin- bottom="10px" data-margin-left="0px" data-margin-right="0px">
<a class="logo-link" href="http://stackoverflow.com/">
<img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
</a>
</div>
<div class="main-menu">
<ul id="menu-mainnav" class="menu">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
<a href="/link1/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
<a href="http://stackoverflow.com/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
<a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
</span>
</a>
</li>
</ul></div>
</div>
Default CSS:
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 94.44444%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
float: right;
position: relative;
z-index: 200;
overflow: hidden;
}
#menu-mainnav {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu-mainnav > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right:11px;
}
#menu-mainnav > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
JSFiddle-Example: https://jsfiddle.net/tz0atc4o/1/
Update:
Here a fiddle, where I've tried the text-align and inline solution. You may read the CSS-Comments, so you are able to test the thing, when the whole div is centered. In this case just comment out the last css rule. In contrast the the whole centered div, I am not sure if the items are really centered, when the last three are floated to right :/
https://jsfiddle.net/37gc2v9x/
Thanks in advance!

add float: right to the last items and others make display: inline-block; and float:none; then only change .menu to text-align: center; and width: 100%;

You can handle the last three li by nth-child selector and float them to right.

if you don't get it right here's something for you to work around.
<style>
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 120%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
float: right;
position: relative;
z-index: 200;
overflow: hidden;
height: 50px;
}
#menu-mainnav {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#menu-mainnav > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right:11px;
}
#menu-mainnav > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
.spacer {
width: 30%;
}
</style>
<div class="row">
<div class="logo" data-margin-top="34px" data-margin- bottom="10px" data-margin-left="0px" data-margin-right="0px"> <a class="logo-link" href="http://stackoverflow.com/"> <img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="38" width="51"> </a> </div>
<table width="92%" border="0">
<tr>
<td width="85%" height="38"><table width="109%" height="25" border="0" align="right">
<tr>
<td width="47%" height="21"> </td>
<td width="53%" align="right"> <ul id="menu-mainnav" class="menu" style="float:none;">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"> <span class="menu-text">CENTER </span></li>
</ul></td>
</tr>
</table></td>
<td width="15%" align="left"><table width="213" border="0" align="right" class="menu">
<tr>
<td width="56%" height="21" align="right"><ul id="menu-mainnav" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <span class="menu-text">TO RIGHT </span></li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <span class="menu-text">TO RIGHT </span></li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT </span></li>
</ul></td>
</tr>
</table></td>
</tr>
</table>
</div>
<p> </div>
</div></p>

Try this:
Divide the menu into two parts.
Simplify the .main-menu class.
Use position:absolute; left:0; right:0; to extend the block to the width of its parent.
Add text-align: center; to place items in the center of the block.
Please check the result: https://jsfiddle.net/glebkema/0on8za7q/
.header {
height: 100px;
overflow: visible;
padding: 0px;
}
.row {
position: relative;
width: 94.44444%;
margin: 0 auto;
max-width: 100%;
}
.logo {
display: inline-block;
width: auto;
float: left;
}
.main-menu {
position: relative;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.menu > li {
float: left;
margin: 0;
padding: 0;
position: relative;
cursor: pointer;
display: list-item;
text-align: match-parent;
padding-right: 11px;
}
.menu > li {
float: none;
display: inline-block;
}
.menu > li > a {
font-size: 11px;
display: block;
box-sizing: content-box;
}
.menu-center {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.menu-right {
float: right;
}
<div class="header" style="height: 100px; overflow: visible;">
<div class="row">
<div class="logo" data-margin-top="34px" data-margin-bottom="10px" data-margin-left="0px" data-margin-right="0px">
<a class="logo-link" href="http://stackoverflow.com/">
<img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45">
</a>
</div>
<div class="main-menu">
<ul id="menu-mainnav-1" class="menu menu-center">
<li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu">
<a href="/link1/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu">
<a href="http://stackoverflow.com/" aria-haspopup="true">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">CENTER </span>
</a>
</li>
</ul>
<ul id="menu-mainnav-2" class="menu menu-right">
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
<a href="http://stackoverflow.com/">
<span class="menu-text">TO RIGHT </span>
</a>
</li>
<li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button">
<a href="http://stackoverflow.com/"> <span class="menu-textmenu-text button button-default button-medium">TO RIGHT
</span>
</a>
</li>
</ul>
</div>
</div>
</div>