Responsive drop downs not activating until resize - javascript

So I have tried to setup a responsive menu using the code here
http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html
The problem I'm having is that the js seems to only activate when I resize the browser otherwise the larger version does not show the sub menu li when hovering and the smaller version has the li showing without clicking them first.
JS
var ww = '100%';
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
CSS
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
HTML
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li>
Shoes
<ul>
<li>
Womens
<ul>
<li>Sandals</li>
<li>Sneakers</li>
<li>Wedges</li>
<li>Heels</li>
<li>Loafers</li>
<li>Flats</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Loafers</li>
<li>Sneakers</li>
<li>Formal</li>
</ul>
</li>
</ul>
</li>
<li>
Shirts
<ul>
<li>
Mens
<ul>
<li>T-Shirts</li>
<li>Dress Shirts</li>
<li>Tank Tops</li>
</ul>
</li>
<li>
Womens
<ul>
<li>T-Shirts</li>
<li>Blouses</li>
<li>Dress Shirts</li>
<li>Tunics</li>
<li>Camisoles</li>
</ul>
</li>
</ul>
</li>
<li>
Pants
<ul>
<li>
Mens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Trousers</li>
<li>Slacks</li>
<li>Jeans</li>
<li>Leggings</li>
</ul>
</li>
</ul>
</li>
<li>
Skirts
<ul>
<li>
Long
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Short
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
<li>
Mini
<ul>
<li>Denim</li>
<li>Knits</li>
</ul>
</li>
</ul>
</li>
<li>
Dresses
<ul>
<li>
Casual
</li>
<li>
Formal
<ul>
<li>Wedding</li>
<li>Party</li>
</ul>
</li>
</ul>
</li>
<li>
Sweaters
<ul>
<li>
Mens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
<li>
Womens
<ul>
<li>Wool</li>
<li>Knitwear</li>
<li>Light Sweaters</li>
<li>Cardigans</li>
<li>Hoodies</li>
</ul>
</li>
</ul>
</li>
<li>
Accessories
<ul>
<li>
Womens
<ul>
<li>Belts</li>
<li>Bags</li>
<li>Jewelery</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Belts</li>
<li>Hats</li>
<li>Eyewear</li>
</ul>
</li>
</ul>
</li>
<li>
Outerwear
<ul>
<li>
Womens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Winter</li>
<li>Spring/Fall</li>
</ul>
</li>
</ul>
</li>
<li>
Shipping Info
</li>
</ul>
</div>


The initial value of ww is '100%', which is a string.
On $(document).ready you call the adjustMenu() method, which reads the value of ww.
Both conditions (ww < 768 and ww >= 768) evaluate to false, so adjustMenu() does nothing on DOMready.
You can avoid this to call $(window).trigger('resize') instead of calling adjustMenu() in your $(document).ready(function() { ... } method so that ww has a numeric value:
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
$(window).trigger('resize');
});

Related

dropdown menu not opening and closing correctly

I have gotten it to open and close when hovering over the nav link but how do I keep it open so I can access the content on the menu? I need it to work exactly how a dropdown menu works.
This is what I have done so far I also need the html layout to stay the same.
$('.nav-link--dropdown').mouseover(function() {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function() {
$('.dropdown-menu').css('display', 'none');
});
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
margin-right: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">dropdown</li>
</ul>
</div>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
View on jsFiddle

Should remove margin use padding for that, if not when we enter that margin area mouse leave event will trigger.
$('.nav-link--dropdown').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.dropdown-menu').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
$('.dropdown-menu').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
padding: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">dropdown</li>
</ul>
</div>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>

The problem you have here is that you leave the nav-link--dropdown when you move to your dropdown-menu. The simple solution: Include your dropdown-menu in your nav item.
$('.nav-link--dropdown').mouseover(function() {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown').mouseleave(function() {
$('.dropdown-menu').css('display', 'none');
});
ul {
list-style: none;
padding: 0px;
display: flex;
}
li {
margin-right: 10px;
}
.dropdown-menu {
display: none;
}
.dropdown-menu ul {
display: block;
background-color: grey;
color: white;
padding: 10px;
text-align: center;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="nav-link">home</li>
<li class="nav-link--dropdown">
dropdown
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
</li>
</ul>
</div>

You can achieve this by bundling the menu item you want to hover over and it's dropdown in the same div.
<div class="nav">
<ul>
<li class="nav-link">home</li>
<div class="innerNav">
<li class="nav-link--dropdown">dropdown</li>
<div class="dropdown-menu">
<ul>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
<li class="dropdown-menu__link">random text</li>
</ul>
</div>
</div>
</ul>
</div>
And:
$('.innerNav').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.innerNav').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
See this JSFiddle: https://jsfiddle.net/rmdfqh6c/

Since your problem is the mouseleave event will trigger when you try to move the mouse to the bellow dropdown menu, if you really must keep the elements separated, add the dropdown-menu to the class that keeps the display:block
$('.nav-link--dropdown, .dropdown-menu').mouseover(function () {
$('.dropdown-menu').css('display', 'block');
});
$('.nav-link--dropdown, .dropdown-menu').mouseleave(function () {
$('.dropdown-menu').css('display', 'none');
});
And remove margin/padding from menu items. Use line-height instead if you want some spacing:
.nav ul li {
line-height: 40px;
}
ul {
list-style: none;
margin: 0; // <--- I changed this from padding: 0px;
display: flex;
}
Otherwise the other suggested solutions to include the dropdown within you parent <ul> element is the best.
JSFiddle

Rotate the arrow as menu is expanded instead of doing at the end of the animation

As soon as I click the menu is expanded and then arrow is rotated. What I want is as soon as I click, menu should expand and arrow should rotate in parallel. How can I achieve that?
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
$('ul.sub-menu').not($(this).siblings()).slideUp("slow").parents('.product-menu').removeClass('active');
$(this).siblings("ul.sub-menu").slideToggle("slow", function() {
if ($(this).parents('.product-menu').hasClass('active')) {
$(this).parents('.product-menu').removeClass('active')
} else $(this).parents('.product-menu').addClass('active');
});
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
template A
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
Template B
<ul class="sub-menu">
<li>3.1
</li>
</ul>
</li>
<li class="product-menu" id="one">Template C
</li>
<li class="product-menu">Template D
</li>
<li class="product-menu">Template E
</li>
<li class="product-menu">Template F
</li>
</ul>
<div class="product-container" />
</div>

The issue is because you're toggling the class in the callback of the animation, so it happens when the animation ends. Simply move that logic in to the outer click event handler.
Also note that you can simplify the whole if condition by just calling toggleClass(). Try this:
$(document).ready(function() {
$(".r-product-page #menu > li > a").click(function() {
var $a = $(this);
$('ul.sub-menu').not($a.siblings()).slideUp("slow").closest('.product-menu').removeClass('active');
$a.closest('.product-menu').toggleClass('active');
$a.siblings("ul.sub-menu").slideToggle("slow");
});
$(".r-product-page #menu #one").click(function() {
$(".product-container").load("productOne.html");
})
});
.r-product-page {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.r-product-page #menu {
height: 100%;
width: 300px;
}
.r-product-page #menu .product-menu {
color: #4d4d49;
font-size: 18px;
}
.r-product-page #menu .product-menu .sub-menu {
display: none;
}
.r-product-page #menu .product-menu .sub-menu li {
color: #898989;
font-family: 18px;
}
ul {
list-style: none;
}
.product-menu .dropdown-arrow {
transition: transform .2s;
}
.product-menu.active .dropdown-arrow {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-product-page container">
<ul style="margin-top:5rem;" id="menu">
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
template A
<ul class="sub-menu">
<li>x</li>
<li>y</li>
<li>z</li>
<li>l</li>
<li>m</li>
<li>n</li>
</ul>
</li>
<li class="product-menu"><img class="dropdown-arrow" src="https://s1.postimg.org/211j5w7oqn/products_dropdown_arrow.png" alt="New york">
Template B
<ul class="sub-menu">
<li>3.1</li>
</ul>
</li>
<li class="product-menu" id="one">Template C</li>
<li class="product-menu">Template D</li>
<li class="product-menu">Template E</li>
<li class="product-menu">Template F</li>
</ul>
<div class="product-container" />
</div>

window resize function not working

I have a menu and i want its dropdown to be accessible with hover when window width is >= 767px and accessible with click event when the window width is < 767px.
Its working only when i refresh the page, otherwise only hover event is working.
JQUERY
(function ($) {
'use strict';
function getWindowWidth() {
var windowWidth = 0;
if (typeof(window.innerWidth) === 'number') {
windowWidth = window.innerWidth;
}
else {
if (document.documentElement && document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
}
else {
if (document.body && document.body.clientWidth) {
windowWidth = document.body.clientWidth;
}
}
}
console.log(windowWidth);
return windowWidth;
}
function widthStatement() {
if (getWindowWidth() >= 767) {
$('.menu > ul > li').on({
mouseenter: function () {
$(this).children('ul').stop(true, false).show();
},
mouseleave: function () {
$(this).children('ul').stop(true, false).hide();
}
});
} else if (getWindowWidth() < 767) {
$('.menu > ul > li').click(function () {
$(this).children('ul').stop(true, false).toggle();
});
}
}
$(document).ready(getWindowWidth, widthStatement);
$(window).on('resize', widthStatement);
}($));
CSS
.menu {
margin: 0 auto;
width: 80%;
background: #e9e9e9;
}
.menu:before, .menu:after {
display: table;
content: ' ';
}
.menu:after {
clear: both;
}
.menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.menu ul > li {
float: left;
margin: 0;
padding: 0;
}
.menu ul > li:hover {
background: #f0f0f0;
}
.menu ul > li > a {
display: block;
padding: 1.5em 2.5em;
color: #444;
}
.menu ul > li > ul {
position: absolute;
left: 0;
display: none;
width: 100%;
background: #f0f0f0;
}
.menu ul > li > ul > li {
padding: 1.5em;
width: 25%;
}
.menu ul > li > ul > li > a {
padding: 0;
border-bottom: 1px solid #ccc;
color: #444;
}
.menu ul > li > ul > li > ul {
position: relative;
display: block;
padding-top: 1em;
}
.menu ul > li > ul > li > ul > li {
padding: 0;
width: 100%;
}
.menu ul > li > ul > li > ul > li > a {
padding: .5em 0;
border: 0;
font-size: .9em;
}
HTML
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School
<ul>
<li>Lidership</li>
<li>History</li>
<li>Locations</li>
<li>Careers</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Research
<ul>
<li>Undergraduate research</li>
<li>Masters research</li>
<li>Funding</li>
</ul>
</li>
<li>Something
<ul>
<li>Sub something</li>
<li>Sub something</li>
<li>Sub something</li>
<li>Sub something</li>
</ul>
</li>
</ul>
</li>
<li>News
<ul>
<li>Today</li>
<li>Calendar</li>
<li>Sport</li>
</ul>
</li>
<li>Contact
<ul>
<li>School
<ul>
<li>Lidership</li>
<li>History</li>
<li>Locations</li>
<li>Careers</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Study
<ul>
<li>Undergraduate</li>
<li>Masters</li>
<li>International</li>
<li>Online</li>
</ul>
</li>
<li>Empty sub</li>
</ul>
</li>
</ul>
</div>
demo: http://codepen.io/riogrande/pen/yJVNMq

It's a problem with the way you're using .ready(). Anyway, you don't need to call getWindowWidth() when the document is ready, because your widthStatement() does it for you. Simply remove that and you're away:
$(document).ready(widthStatement);
http://codepen.io/anon/pen/YWpXOp

StopPropogation() not working

I am coding a multilevel drop down menu in which when the parent is hovered, the submenu drops down with JQuery fadeIn(). But the effect is getting propagated to the child elements. They are also having fadeIn() when hovered on. The code is
HTML
<nav>
<ul id="headnav">
<li> <a class="sliding-middle-out" href="index.php"> ABOUT </a> </li>
<li> <a class="sliding-middle-out" href="practice.php"> PRACTICE </a> </li>
<li> <a class="sliding-middle-out" href="research.php"> RESEARCH </a>
<ul>
<li> Papers </li>
<li> Articles </li>
<li> PhD Students </li>
<li> Presentations </li>
</ul>
</li>
</ul>
</nav>
JQuery
$(document).ready(function() {
$('nav > ul > li > ul').hide();
$('nav > ul > li').hover(function() {
$(this).find('ul').fadeIn(400);
},function() {
$(this).find('ul').fadeOut(400);
});
});
CSS
nav {
position: absolute;
min-width:30%;
float:right;
right:12%;
top: 16%;
}
nav ul li {
display: inline-block;
min-width: 20px;
text-transform: uppercase;
}
nav ul li a{
float: left;
padding: 0px 10px 0px 10px;
}
nav ul li ul {
display: inline-block;
position: absolute;
width: auto;
margin-left:-35%;
margin-top:7%;
}
nav ul li ul li {
display: inline-block;
min-width:10px;
}
nav ul li ul li a {
color:#7f8c8d;
}
When you hover your mouse over the child elements, they again fadeIn(). I tried e.stopPropagation() and e.preventDefault() but none of them are working.
Please help

Show the submenu on hovering over the outer li, but hide it on leaving the inner ul:
$('nav > ul > li').mouseenter(function(e) {
$(this).find('ul').fadeIn(400);
});
$('nav > ul > li > ul').mouseleave(function() {
$(this).fadeOut(400);
});
http://jsfiddle.net/mava7btt/3/

fixing submenu to top of nav

I have created a dropdown navigation with two sub-menu's.
I am trying to get the second sub-menu to start from the top (just underneath the primary nav/black bar) and not at it's current position but I am not sure how to do this.
Here is a codepen I made http://codepen.io/anon/pen/ByaaYM
So for example, if you hover over Personal > Caravan or Personal > Home & Property, the top of the sub menu should sit in the same place, just underneath the black bar.
Any help would be greatly appreciated
This is the outcome I would like to achieve http://codepen.io/anon/pen/OPJPNL - Notice when hovered, the sub-menu's sit flush directly underneath the black bar.
The code...
Html
<ul>
<li>
Personal
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
Boat
</li>
<li data-submenu-id="submenu-snub-nosed1">
Caravan
<ul id="submenu-snub-nosed1">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
Home & Property
<ul id="submenu-snub-nosed">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Military</li>
<li>Motor</li>
<li>More</li>
</ul>
</li>
<li>
Business
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
Care & Medical
<ul id="submenu-snub-nosed4">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li>
Financial
</li>
<li data-submenu-id="submenu-snub-nosed3">
Liability
<ul id="submenu-snub-nosed3">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Property</li>
<li>Trade Specific</li>
</ul>
</li>
<li>Infozone</li>
</ul>
CSS
* {
box-sizing:border-box;
}
body {
font-family: sans-serif;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
background: #333;
padding: 0 10px;
list-style: none;
position: relative;
display: inline-block;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
}
ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
ul li:hover a {
color: #fff;
}
ul li a {
display: block;
padding: 25px 40px;
color: #fff;
text-decoration: none;
}
ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
ul ul li a {
padding: 20px;
color: #fff;
}
ul ul li a:hover {
background: #4b545f;
}
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
ul ul ul li {
display: inline-block;
width: 49%;
}
.dropdown-menu > li {
width: 200px;
}

If I understand correctly, you have a padding-problem. If you remove the padding from this:
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
Here's the updated CodePen

Try Below Html Code
you need to specify margin-top css style for each inner <ul>
`
<ul>
<li>
Personal
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
Boat
</li>
<li data-submenu-id="submenu-snub-nosed1">
Caravan
<ul id="submenu-snub-nosed1" style="margin-top:-60px;">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
Home & Property
<ul id="submenu-snub-nosed" style="margin-top:-120px;">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Military</li>
<li>Motor</li>
<li>More</li>
</ul>
</li>
<li>
Business
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
Care & Medical
<ul id="submenu-snub-nosed4">
<li>Motor Home</li>
<li>Touring Caravan</li>
<li>Static Leisure</li>
<li>Trailer Tent</li>
</ul>
</li>
<li>
Financial
</li>
<li data-submenu-id="submenu-snub-nosed3">
Liability
<ul id="submenu-snub-nosed3" style="margin-top:-120px;">
<li>Beach Hut</li>
<li>Buy To Let</li>
<li>Foster Home</li>
<li>High Net Worth</li>
</ul>
</li>
<li>Property</li>
<li>Trade Specific</li>
</ul>
</li>
<li>Infozone</li>
</ul>
`

Categories

Resources