how to implement css horizontal menu with variable width submenus - javascript

I have a menu I would like to implement. It can sometimes drill down 3 or 4 layers so I'm trying to optimize space taken up by each menu. I'd like to have each ul set to width: auto, the only problem is I can't set the right/left property reliably for where the next submenu should appear. Here's some code:
HTML
<ul class="top-level-menu horizontal-multimenu">
<li>L360 Home</li>
<li>
Liquidity Risk Monitor
<ul class="second-level-menu">
<li>Indicators</li>
<li>Stress Levels</li>
</ul>
</li>
<li>
Sources and Assumptions
<ul class="second-level-menu">
<li>Source of Funds</li>
<li>Funding Assumptions</li>
</ul>
</li>
<li>
Data
<ul class="second-level-menu">
<li>Transfer</li>
<li>Table</li>
</ul>
</li>
<li>
Reports
<ul class="second-level-menu">
<li>
Risk Monitor
<ul class="subsecond-level-menu">
<li>Scorecard</li>
<li>DCG ALCO Data</li>
<li>Historical</li>
<li>
Prior Values
<ul class="subsecond-level-menu">
<li>Conditional Item</li>
<li>Conditional Item</li>
<li>Conditional Item</li>
<li>Conditional Item</li>
<li>Conditional Item</li>
<li>Conditional Item</li>
</ul>
</li>
</ul>
</li>
<li>
Stress Reports
<ul class="subsecond-level-menu">
<li>Footnotes</li>
<li>
Liquidity Availability Analysis
<ul class="subsecond-level-menu">
<li>Base Case</li>
<li>Level 1</li>
<li>Level 2</li>
<li>Level 3</li>
</ul>
</li>
<li>Exexcutive Summary</li>
<li>Liquidity Forecast</li>
</ul>
</li>
<li>
Worksheets
<ul class="subsecond-level-menu">
</ul>
</li>
<li>Package Creator</li>
<li>
Memoranda
<ul class="subsecond-level-menu">
</ul>
</li>
</ul>
</li>
<li>Support</li>
</ul>
CSS
/* Menu Styles */
.subsecond-level-menu
{
position: absolute;
top: 0;
right: 999px;
width: 300px;
list-style: none;
padding: 0;
margin: 0;
opacity: 0;
transition: opacity .3s;
}
.subsecond-level-menu>li
{
height: 30px;
background: #999999;
padding: 0 1em;
}
.subsecond-level-menu>li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li
{
position: relative;
height: 30px;
background: #999999;
padding: 0 1em;
}
.second-level-menu>li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li
{
position: relative;
float: left;
height: 30px;
width: /*150px*/auto;
background: #999999;
padding: 0 1em;
}
.top-level-menu>li:hover { background: #CCCCCC; }
.top-level-menu li:hover>ul
{
/*On hover, display the next level's menu */
display: block;
right: -300px;
opacity: 1;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
/*padding: 0 0 0 10px;*/
margin: 0 auto;
/* Make the link cover the entire list item-container */
display: inline;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
.top-level-menu li{whitespace: no-wrap;}
This should work, but all the .subsecond-level-menu's are required to be x px wide so I know where to put them.
Do you think it would be better to assign id's to each submenu and then just assign static widths/right's to each or try to make it happen with some javascript?
I've been wrestling with the js attempt for a while, but it doesn't quite seem to the submenu widths. Here's that code that I've been working on if you're curious:
JS
$(document).ready(function(){
$('.top-level-menu').find('li').hover(
function(e){
$(e.target).css('background-color', 'red');
var item = $(this);
console.log('The child list is considered hidden: ' + $(e.target).children('ul').is(':hidden') + ', Child width: '+$(e.target).children('ul').outerWidth() + 'px');
$(e.target).children('ul').css({
'right': (-1 * $(e.target).children('ul').outerWidth()) + 'px',
'opacity': '1',
'display': 'block'
});
},
function(e){
$(e.target).css('background-color', '');
var item = $(this),
emptyCss = {
'right' : '',
'opacity' : '',
'display': ''};
item.children('ul').css(emptyCss);
}
);
});

Related

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 prevent link from opening in nested <ul> if <li> hasClass

how to prevent opening link if parent li hasClass: has-menu ? it must work for all nested level
in example below only Sub Sub cat 1/1 and Sub cat 1/2 should open link but if i make it work then collapse with + and - is broken , how to combinate both collapse and link opening only if li dont have class: has-menu
$('li').click(function(e){
if ($(this).hasClass('has-menu')) {
e.preventDefault();
e.stopPropagation();
$(this).children("div").children("ul").toggleClass("menu-close");
$(this).toggleClass("menu-open");
}
})
ul{
padding: 0px;
list-style: none;
}
ul li{
padding: 5px 0;
}
ul li a{
width: 100%;
display: inline-block;
}
.menu-close{
display: none;
/*background-color:red;*/
}
/* Main menu */
.menu-main{
width: 250px;
}
.menu-main li{
position: relative;
}
.has-menu:before{
content: '+';
position: absolute;
right: 0;
}
.has-menu.menu-open:before{
content: '-' !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-main">
<li class="has-menu">
Test 1
<div class="menu-wrapper">
<ul class="menu-child menu-close">
<li class="has-menu">
Sub cat 1/1
<div class="menu-wrapper">
<ul class="menu-subchild menu-close">
<li>
Sub Sub cat 1/1
</li>
</ul>
</div>
</li>
</ul>
<ul class="menu-child menu-close">
<li>
Sub cat 1/2
</li>
</ul>
</div>
</li>
</ul>

.has-menu>a{
pointer-events: none;
}
Try this.
just disable pointer-events on anchor tags that have parent with class .has-menu

Submenu dissappears on mouse hover

I want the dropdown menu behave like here: https://svyaznoy.ru
var timer;
$(".catalog-menu li").mouseenter(function() {
var that = this;
timer = setTimeout(function(){
$(that).children(".submenu").show();
}, 500);
}).mouseleave(function() {
var that = this;
clearTimeout(timer);
setTimeout(function () {
$(that).children(".submenu").hide();
}, 500);
});
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
display: none;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>
It works somewhat similar to svyaznoy.ru, but have a bug.
For example, I hover on "Apple" menu item. Laptops and iPhones show up. Next I hover on "Laptops". Some apple laptop models show up. And here's where the bug shows: if my mouse pointer doesn't leave "Laptops" item and goes straight to laptops submenu - all is ok, but when it leaves "Laptops" on the way to laptops list, e.g. it hovers on iPhones for a moment, then laptops list hides, and I want it to stay there. How can I fix this bug?
jsfiddle: https://jsfiddle.net/16region/vtrj9wgk/30/

You can change display: none to visibility: hidden and add transition-delay. And so you wont need jquery/js
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
visibility: hidden;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
transition: 0s visibility;
transition-delay: 0.5s;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li:hover > ul.submenu {
visibility: visible;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</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>
`

Categories

Resources