Develop Reference

Drop Down direction changes according to free space

I am just into programing and I need your help.
I have an issue with my drop down sub-menu-s. I have a simple drop down on my header, however it is located too close to window border in this case only(Depending on permissions).
So the sub-menu opens beyond window border to the right side and user doesn't see the content of it.
I want it to detect if there is enough space to open on the right side. If yes, open on right. If not open on the left. Could you please help me to solve this issue?
This is how it works when it has enough space.
Here is my html:
<ul class="main-menu-list">
<li class="header-dropdown-item">
<span class="header-dropdown-item-title">Admin</span>
<img src="../Layout/images//arrow-down.svg" alt="">
<ul class="sub-menu-list">
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Users</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item">New
users</a>
</li>
<li>
<a class="header-sub-menu-item">Users
management</a>
</li>
<li>
<a class="header-sub-menu-item" >Contacts List</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Security</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" >Roles</a>
</li>
<li>
<a class="header-sub-menu-item" >Roles and
Permissions</a>
</li>
<li>
<a class="header-sub-menu-item" >Column Based
Security</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Notifications Management</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item"
>Email Notifications</a>
</li>
<li>
<a class="header-sub-menu-item" >Sent Email
Notifications</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Source Data Analysis</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" >Automated
Error Logging</a>
</li>
</ul>
</li>
<li class="header-dropdown-item">
<a class="arrow-right header-dropdown-item-title">Technical Services</a>
<ul class="sub-menu-list-right">
<li>
<a class="header-sub-menu-item" >Dropdown Lists</a>
</li>
<li>
<a class="header-sub-menu-item" >Unconventional
Tags</a>
</li>
<li>
<a class="header-sub-menu-item"
>Tag Matching Duplicates</a>
</li>
<li>
<a class="header-sub-menu-item" >3 Digit Code
Register</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Here is my CSS:
.sub-menu
background-color: header-sub-menu-background-color;
color: header-sub-menu-color;
display: flex;
justify-content: flex-end;
height: header-sub-menu-height;
padding-right: page-side-padding;
span
margin: 10px 0;
display: inline-block;
cursor: pointer;
ul
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
font-family: font-default-content;
font-size: font-size-ssm;
font-weight: bold;
text-transform: uppercase;
padding: 0;
li
& + li
margin-left: 30px;
a
cursor: pointer;
ul
& > li:hover
& > a,
& > span
color: header-menu-active-color;
> .arrow-right:after
border-left-color: header-menu-active-color;
> .sub-menu-list
shown()
> .sub-menu-list-right
showImmediately()
li
.arrow-right
cursor: default;
&:after
pointer-events: none;
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid gray-color-3;
display: inline-block;
vertical-align: middle;
right: 12px;
top: 0;
bottom: 0;
margin: auto;
a:hover, span:hover
color: header-menu-active-color;
.main-menu-list li
position: relative;
.sub-menu-list, .sub-menu-list-right
hidden()
display: inline-block;
list-style: none;
position: absolute;
background-color: black-color-1;
top: 31px;
left: -15px;
z-index: $main-menu-sub-menu-list-zindex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
li
position: relative;
white-space:nowrap;
margin-left: 0;
:hover > .sub-menu-list-right
shown()
a
width: 100%;
font-family: font-default-content;
font-size: 10px;
font-weight: 700;
padding: 10px 32px 10px 15px;
display: inline-block;
&:hover
color: header-menu-active-color;
p:hover
color: header-menu-active-color;
.sub-menu-list
min-width: 100%;
hideWithDelay()
a
text-decoration: none;
display: inline-block;
color: gray-color-3;
.active
color: header-menu-active-color;
.sub-menu-list-right
top: 0;
left: 100%;
&:hover
.sub-menu-list
shown()
&:hover
shown()
.sub-menu-list-right
&:hover
shown()
span
background-color: black-color-1
.main-menu-list
li:first-child:nth-last-child(2)
li:first-child:nth-last-child(3)
.sub-menu-list-right
left: auto;
right: 100%;
And Pure JS:
<script type="text/javascript">
(function () {
handleMenuItems();
// functions:
function handleMenuItems() {
var menuEl = document.querySelector(".menu"),
userLinksList = menuEl && menuEl.querySelector(".user-links"),
recentlyItemListEl = menuEl && menuEl.querySelector(".recently-visited-item"),
favoriteItemListEl = menuEl && menuEl.querySelector(".favorites-item");
if (userLinksList) {
userLinksList.addEventListener("mouseover", function (evt) {
var options = {
url: "/api/userlinks",
method: "GET",
successCallback: onloadUserLinks
};
function onloadUserLinks(result) {
if (!window.__RAPMD__) {
window.__RAPMD__ = {};
}
window.__RAPMD__.lastUserLinks = result;
createMenuList(result.RecentLinks, recentlyItemListEl, "No recently visited pages");
createMenuList(result.Favorites, favoriteItemListEl, "No favorite pages");
}
if (!window.__RAPMD__ || !window.__RAPMD__.lastUserLinks) {
ajax(options);
}
});
userLinksList.addEventListener("mouseleave", function (evt) {
if (!window.__RAPMD__) {
return;
}
window.__RAPMD__.lastUserLinks = null;
});
}
}
function createMenuList(items, menuItemEl, emptyListTitle) {
if (!menuItemEl) {
return;
}
var df = document.createDocumentFragment();
(items.length ? items : [{ Title: emptyListTitle }]).forEach(function (item) {
var li = document.createElement("li"),
a = document.createElement("a");
if (item.Url) {
a.href = item.Url;
} else {
a.classList.add("empty-link-item");
}
a.innerHTML = item.Title;
li.appendChild(a);
df.appendChild(li);
});
menuItemEl.textContent = "";
menuItemEl.appendChild(df);
}
function ajax(options) {
var url = options.url,
method = options.method,
successCallback = options.successCallback,
failureCallback = options.failureCallback,
xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = function () {
if (xhr.status === 200 && successCallback) {
var response = JSON.parse(xhr.responseText);
successCallback(response);
} else if (failureCallback) {
failureCallback();
}
};
xhr.send();
}
})();
</script>

I don't think there is an easy CSS way to solve this. The only option I can think about is to align it to the left if the space is not enough. You can use the document.querySelector("#sub-menu").getBoundingClientRect() function to get the position of the element.
{
"x": 1261.5,
"y": -309,
"width": 298,
"height": 452,
"top": -309,
"right": 1559.5,
"bottom": 143,
"left": 1261.5
}
Then you can check if the sub-menu would overflow out of the page and assign a class that makes it align to the left instead of the right.
const subMenuBound = document.querySelector("#sub-menu").getBoundingClientRect();
const windowWidth = document.getElementsByTagName("body")[0].clientWidth;
const subMenuX = subMenuBound.x;
const subMenuWidth = subMenuBound.width;
if (subMenuBound.width + subMenuBound.x > windowWidth) {
// assign a class to the sub-menu to
// align to the left instead of right
} else {
// remove the class
}

How to toggle hidden by default without any animation

I using a bootstrap tree menu
the code will be hidden all sub_menu default
but, onload page will be run a animation to close.
How to without it?
JS here
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
$(function(){
$('.tree-toggle').parent().children('ul.tree').toggle(200);
})
All code in Codepen

Just remove the duration from the one that runs on page load:
$('.tree-toggle').click(function () {
$(this).parent().children('ul.tree').toggle(200);
});
$(function(){
$('.tree-toggle').parent().children('ul.tree').toggle();
})
As mentioned in the documentation for Toggle:
With no parameters, the .toggle() method simply toggles the visibility of elements:

You can set the delay parameter to 0(or ignore) to avoid the animation.
$(function() {
$(".tree-toggle")
.parent()
.children("ul.tree")
.toggle(0);
});
$(".tree-toggle").click(function() {
$(this)
.parent()
.children("ul.tree")
.toggle(300);
});
$(function() {
$(".tree-toggle")
.parent()
.children("ul.tree")
.toggle(0);
});
.no-padding {
padding: 0px;
}
.glyphicon-icon-rpad .glyphicon,
.glyphicon-icon-rpad .glyphicon.m8,
.fa-icon-rpad .fa,
.fa-icon-rpad .fa.m8 {
padding-right: 8px;
}
.glyphicon-icon-lpad .glyphicon,
.glyphicon-icon-lpad .glyphicon.m8,
.fa-icon-lpad .fa,
.fa-icon-lpad .fa.m8 {
padding-left: 8px;
}
.glyphicon-icon-rpad .glyphicon.m5,
.fa-icon-rpad .fa.m5 {
padding-right: 5px;
}
.glyphicon-icon-lpad .glyphicon.m5,
.fa-icon-lpad .fa.m5 {
padding-left: 5px;
}
.glyphicon-icon-rpad .glyphicon.m12,
.fa-icon-rpad .fa.m12 {
padding-right: 12px;
}
.glyphicon-icon-lpad .glyphicon.m12,
.fa-icon-lpad .fa.m12 {
padding-left: 12px;
}
.glyphicon-icon-rpad .glyphicon.m15,
.fa-icon-rpad .fa.m15 {
padding-right: 15px;
}
.glyphicon-icon-lpad .glyphicon.m15,
.fa-icon-lpad .fa.m15 {
padding-left: 15px;
}
ul.nav-menu-list-style .nav-header .menu-collapsible-icon {
position: absolute;
right: 3px;
top: 16px;
font-size: 9px;
}
ul.nav-menu-list-style {
margin: 0;
}
ul.nav-menu-list-style .nav-header {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #e8e8e8;
display: block;
margin: 0;
line-height: 42px;
padding: 0 8px;
font-weight: 600;
}
ul.nav-menu-list-style>li {
position: relative;
}
ul.nav-menu-list-style>li a {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #e8e8e8;
padding: 0 10px;
line-height: 32px;
}
ul.nav-menu-list-style>li:first-child a {}
ul.nav-menu-list-style {
list-style: none;
padding: 0px;
margin: 0px;
}
ul.nav-menu-list-style li .badge,
ul.nav-menu-list-style li .pull-right,
ul.nav-menu-list-style li span.badge,
ul.nav-menu-list-style li label.badge {
float: right;
margin-top: 7px;
}
ul.bullets {
list-style: inside disc
}
ul.numerics {
list-style: inside decimal
}
.ul.kas-icon-aero {}
ul.kas-icon-aero li a:before {
font-family: 'Glyphicons Halflings';
font-size: 9px;
content: "\e258";
padding-right: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<h1>Bootstrap Tree Menu Example</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="well no-padding">
<div>
<ul class="nav nav-list nav-menu-list-style">
<li><label class="tree-toggle nav-header glyphicon-icon-rpad"><span class="glyphicon glyphicon-folder-close m5"></span>Bootstrap
<span class="menu-collapsible-icon glyphicon glyphicon-chevron-down"></span></label>
<ul class="nav nav-list tree bullets">
<li>JavaScript</li>
<li>CSS <span class="badge">42</span></li>
<li><label class="tree-toggle nav-header">Buttons</label>
<ul class="nav nav-list tree">
<li>Colors</li>
<li>Sizes</li>
<li><label class="tree-toggle nav-header">Forms</label>
<ul class="nav nav-list tree">
<li>Horizontal</li>
<li>Vertical</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="divider"></li>
<li><label class="tree-toggle nav-header">Responsive</label>
<ul class="nav nav-list tree">
<li>Overview</li>
<li>CSS</li>
<li><label class="tree-toggle nav-header">Media Queries</label>
<ul class="nav nav-list tree">
<li>Text</li>
<li>Images</li>
<li><label class="tree-toggle nav-header">Mobile Devices</label>
<ul class="nav nav-list tree">
<li>iPhone</li>
<li>Samsung</li>
</ul>
</li>
</ul>
</li>
<li><label class="tree-toggle nav-header">Coding</label>
<ul class="nav nav-list tree">
<li>JavaScript</li>
<li>jQuery</li>
<li><label class="tree-toggle nav-header">HTML DOM</label>
<ul class="nav nav-list tree">
<li>DOM Elements</li>
<li>Recursive</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Added $(box).bind("click touchstart", function() { to my logic but not successful on iPad

I have added '$(box).bind("click touchstart", function() {' to my script but still not running on iPad. I'm trying to get this script to work across all devices so that user can select the box nunbers 1-8 and recommendation with a border will show below. any idea why this is breaking on iPad? is there a better way to structure this?
var numbers = document.querySelectorAll(".clicked");
var letters = document.querySelectorAll(".border");
numbers.forEach(function(box, index) {
$(box).bind("click touchstart", function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
}
else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function(){
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:15px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:15px auto;padding:0;}
.showBorder { outline: 1px dashed #233354; outline-offset:1px;}
.box-tip {
display:inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left:10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div>
<span>Test some logic two</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

Try the following tweaks:
Detect & store user agent first ua = navigator.userAgent;
Then match it with iPad's and store it event = (ua.match(/iPad/i)) ? "touchstart" : "click";.
Use as $(box).bind(event, function() { //do stuff });.
Working on iPad Air.
var numbers = document.querySelectorAll(".clicked"),
letters = document.querySelectorAll(".border"),
ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
numbers.forEach(function(box, index) {
$(box).bind(event, function() {
letters.forEach(function(box) {
box.classList.remove("showBorder");
});
var info = document.getElementsByClassName('box-tip')[0];
if (index > 2) {
info.style.left = 11 + ((index - 3) * 45) + 'px';
} else {
info.style.left = 0 + 'px';
}
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
$(document).on("click", '.clicked', function() {
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
});
.list-box li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.list-box {
margin: 15px auto;
padding: 0;
}
.box-sleeve li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.box-sleeve {
margin: 15px auto;
padding: 0;
}
.showBorder {
outline: 1px dashed #233354;
outline-offset: 1px;
}
.box-tip {
display: inline;
margin: auto;
position: relative;
visibility: hidden;
padding-left: 10px;
}
.numberCircle {
border-radius: 90%;
font-size: 12px;
border: 2px solid #000;
color: #fff;
background: #000;
padding: 0 4px;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {
color: #fff;
background-color: #000;
}
/* add these to prevent text move below 768 viewports */
#media (max-width: 768px) {
.box-tip span {
position: fixed;
left: 10px;
}
.box-tip span.numberCircle {
position: fixed;
left: 236px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Test some logic one</span>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div>
<span>Test some logic two</span>
</div>
<div class="box-tip">
<span>Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

How do I shift content to left in nav bar

So I know this will be a very easy fix, however, I cannot figure it out for the life of me.
How can I shift the letters in this nav bar to the very left?
$(document).ready(function() {
$(".letter").click(function(e) {
$(".letter").parent().removeClass('current');
$(this).parent().addClass('current');
var letter = $(this).html().trim();
$(".submenuDiv").hide();
x = e.clientX - 100;
pos = $(this).position();
y = pos.top + 50;
$("#div" + letter).css({
left: x,
top: y,
position: 'absolute'
});
$("#div" + letter).show();
});
});
.alphabetNav {
background-color: #D9DDDF;
}
.alphabetNav li {
text-decoration: none;
cursor: pointer;
float: left;
display: inline;
list-style: none;
background-color: #E9EDEF;
padding: 3px;
margin: 2px;
}
.letter:hover {
color: red;
}
}
.submenuDiv ul {
display: inline;
}
.submenuDiv ul li {
float: left;
list-style: none;
padding: 5px;
margin: 10px;
background-color: #F1F5F7;
border: solid 1px black;
border-radius: 10px;
font-size: 12px;
}
.submenuDiv {
display: none;
}
.alphabetNav {
width: 550px;
height: 27px
}
.noNav li {
cursor: default;
color: #ccc
}
li.current {
background: #fff
}
.alphabetNav li {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<ul class='alphabetNav'>
<li><a class='letter' id='letterA'>A</a>
</li>
<li><a class='letter' id='letterB'>B</a>
</li>
<li><a class='letter' id='letterC'>C</a>
</li>
<ul class='noNav'>
<li>D</li>
</ul>
<li><a class='letter' id='letterE'>E</a>
</li>
<ul class='noNav'>
<li>F</li>
</ul>
</ul>
<!-- Submenu for letter A -->
<div class='submenuDiv' id='divA'>
<ul>
<li>
Abbotsford-Mission (B.C.)
</li>
</ul>
</div>
<!-- Submenu for letter B -->
<div class='submenuDiv' id='divB'>
<ul>
<li>
Barrie (Ont.)
</li>
<li>
Brantford (Ont.)
</li>
</ul>
</div>
<!-- Submenu for letter C -->
<div class='submenuDiv' id='divC'>
<ul>
<li>
Calgary (Alta.)
</li>
</ul>
</div>
<!-- Submenu for letter D -->
<div class='submenuDiv' id='divD'>
<ul>
<li>
Apple
</li>
<li>
Artist
</li>
</ul>
</div>
<!-- Submenu for letter E -->
<div class='submenuDiv' id='divE'>
<ul>
<li>
Edmonton (Alta.)
</li>
</ul>
</div>
</body>
Thanks in advance!

All you need is:
.alphabetNav{
padding-left: 0px;
}
Get familiar with using the Web Inspector in the browser, you will get to know what you need to do to fix your problem. :)
Here is a snapshot from Chrome (the green part is for padding):

Remove the padding from the container.
.alphabetNav{
padding:0;
background-color:#D9DDDF;
}
Or just the left padding.
.alphabetNav{
padding-left:0;
background-color:#D9DDDF;
}

Set padding to 0 on alphabetNav

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>
`