I've lately managed to make my accordion menu. I did everything besides this one thing I'm looking for help.
This is my accordion menu:
HTML
<div class="sidebar-wrapper">
<ul class="main_nav">
<li><a href='#'>MAIN 1</a>
<ul class="sub-menu">
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
<li><a href='#'>SUB MENU</a>
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>MAIN 2</a></li>
</ul>
</div>
CSS
.sidebar-wrapper {
width: 250px;
margin-top: 30px;
}
.main_nav {
width: 250px;
list-style: none;
padding: 40px 30px 25px 0;
font-family: Arial;
}
ul.main_nav {
padding: 0;
margin: 0;
list-style-type: none;
}
ul.main_nav li {
list-style-type: none;
}
ul.main_nav li a {
background-image: url('../images/acmenu_bg.png');
background-repeat: repeat-x;
line-height: 10px;
padding: 13px 10px;
display: block;
text-decoration: none;
font-size: 13px;
color: #fff;
font-weight: bold;
list-style: none;
}
ul.main_nav li a:hover {
/* background-image: url(''); HOVER ?!*/
color: #ef7b0b;
}
ul.main_nav ul {
margin: 0;
padding: 0;
display: none;
}
ul.main_nav ul li {
margin: 0;
padding: 0;
clear: both;
}
ul.main_nav ul li a {
background-image: url('../images/acmenu2_bg.png');
background-repeat: repeat-x;
padding-left: 20px;
font-size: 12px;
font-weight: bold;
}
ul.main_nav ul li a:hover {
color: #dcdcdc;
/* HOVER */
}
ul.main_nav ul li a:active {
background-image: url('../images/acmenu1_bg.png');
background-repeat: repeat-x;
}
ul.main_nav ul ul li a {
background: #f6f6f6;
color: #000;
padding-left: 40px;
border-bottom: 1px solid #e7e7e7;
}
ul.main_nav ul ul li a:hover {
color: #ef7b0b;
text-decoration: underline;
}
JS
$(document).ready(function() {
$('.sidebar-wrapper ul li a').click(function(ev) {
$('.sidebar-wrapper .sub-menu').not($(this).parents('.sub-menu')).slideUp();
$(this).next('.sub-menu').slideToggle();
$('.main_nav ul li a').removeClass('active');
$(this).addClass('active');
ev.stopPropagation();
});
});
My accordion menu example jsFiddle
As you can see I've tried to write the code as simple as possible. There are 2 things I can't handle with:
1st. ) I made a hover background to my sub-menus (only) - when It's clicked sub-sub menu list is showing - I would like to have only sub-menu items to be hovered (with that orange gradient), not sub-sub menu items, because when you click on sub-sub menu item it takes active state from sub-menu item, remove it and assign for yourself. I have a problem fixing that. ?
2nd. ) It's related to sub sub menu items. I would like to have sub-menu item active (covered with orange gradient background) when I have active sub sub menu item clicked (which is orange underline). One more thing, I'd like it to be always collapsed if sub sub menu item is active.
If something is unclear to you or I wrote something wrong please correct me and do not hesitate to ask for more details.
I would really appreciate for your help.
Thank you. Greetings -
Chris
While I definitely applaud the abstraction of your Javascript, which is almost always considered a benefit and a proper coding practice, it appears as though you may be sacrificing control of the elements themselves; this is most likely due to the fact that each of your menus (sub-menu, sub-sub-menu) share the same class ("sub-menu").
In order to gain greater control over your Javascript, it might be worth specifying distinct class names for each of the menu elements:
Sub-Menu (class: sub-menu)
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
Sub-Sub-Menu (class: sub-menu)
<ul class="sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
By specifying distinct class names, you can determine what to do/not do when a certain element is accessed in the DOM, that is:
<ul class="sub-sub-menu">
<li><a href='#'>SUB-SUB MENU</a></li>
</ul>
Related
I have a navbar menu, and in it there are 3 dropdown menus which default is hover. because the 3 menus are close together, the hover from the dropdown causes a bug/collision, I want to replace it with a 'click' dropdown, where do I have to change the css or javascript code?
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li class="drop-down">Profile
<ul>
<li>WBK & WBBM</li>
<li><a href={{route('sambutan')}}>Sambutan</a></li>
<li><a href={{route('visimisi')}}>Visi Misi</a></li>
<li><a href={{route('strukturorganisasi')}}>Struktur Organisasi</a></li>
<li><a href={{route('pejabat')}}>Pejabat Struktural</a></li>
<li><a href={{route('sejarah')}}>Sejarah Kejari Sragen</a></li>
<li><a href={{route('doktrin')}}>Tri Krama Adhyaksa</a></li>
</ul>
</li>
<li class="drop-down">Bidang
<ul>
<li>Bidang</li>
<li><a href={{route('pembinaan')}}>Pembinaan</a></li>
<li><a href={{route('intelijen')}}>Intelijen</a></li>
<li><a href={{route('pidum')}}>Tindak Pidana Umum</a></li>
<li><a href={{route('pidsus')}}>Tindak Pidana Khusus</a></li>
<li><a href={{route('datun')}}>Perdata & Tata Usaha Negara</a></li>
<li><a href={{route('barbuk')}}>Pengolahan Barang Bukti & Barang Rampasan</a></li>
</ul>
</li>
</ul>
</nav><!-- .nav-menu -->
It would help if you posted the CSS/JS as well. I've styled your HTML to be a very basic nav, but in the future please follow Stack Overflows Minimal Reproducible guidelines.
Your code examples should be…
…Minimal – Use as little code as possible that still produces the same problem
…Complete – Provide all parts someone else needs to reproduce your problem in the question itself
…Reproducible – Test the code you're about to provide to make sure it reproduces the problem
That said!
Here's a working example of what you've described, please let me know if this doesn't fit with what you need.
let navLinks = document.querySelectorAll("nav > ul > li");
navLinks.forEach(link => {
link.addEventListener('click', () => toggleClassName(link, navLinks) );
});
function toggleClassName(link, navLinks) {
if (link.classList.contains('active')) {
link.classList.remove('active');
} else {
navLinks.forEach(currentLink => {currentLink.classList.remove('active');})
link.classList.add('active');
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
ul {
list-style:none;
padding: 1em;
margin:0;
}
li {
padding: .5em;
}
nav > ul {
display:flex;
list-style:none;
}
nav > ul > li {
position:relative;
}
nav > ul > li > a {
color: black;
text-decoration: none;
background: #EF798A;
padding: .5em;
border-radius: .3em;
color:white;
font-weight:bold;
text-transform:uppercase;
}
nav > ul > li > ul {
position:absolute;
top:calc(100% + .5em);
width: 10em;
background: #E5C3D1;
border-radius: .3em;
max-height:1px;
opacity:0;
visibility:hidden;
}
nav > ul > li.active > ul {
max-height:100vh;
opacity:1;
visibility:visible;
}
nav > ul > li > ul > li {
padding-top: 0;
}
nav > ul > li > ul > li::after {
content: " ";
position: absolute;
bottom: 99%; /* At the bottom of the tooltip */
left: 7%;
margin-left: -.5em;
border-width: .5em;
border-style: solid;
border-color: transparent transparent #E5C3D1 transparent;
}
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li class="drop-down active">Profile
<ul>
<li>WBK & WBBM</li>
<li><a href={{route('sambutan')}}>Sambutan</a></li>
<li><a href={{route('visimisi')}}>Visi Misi</a></li>
<li><a href={{route('strukturorganisasi')}}>Struktur Organisasi</a></li>
<li><a href={{route('pejabat')}}>Pejabat Struktural</a></li>
<li><a href={{route('sejarah')}}>Sejarah Kejari Sragen</a></li>
<li><a href={{route('doktrin')}}>Tri Krama Adhyaksa</a></li>
</ul>
</li>
<li class="drop-down">Bidang
<ul>
<li>Bidang</li>
<li><a href={{route('pembinaan')}}>Pembinaan</a></li>
<li><a href={{route('intelijen')}}>Intelijen</a></li>
<li><a href={{route('pidum')}}>Tindak Pidana Umum</a></li>
<li><a href={{route('pidsus')}}>Tindak Pidana Khusus</a></li>
<li><a href={{route('datun')}}>Perdata & Tata Usaha Negara</a></li>
<li><a href={{route('barbuk')}}>Pengolahan Barang Bukti & Barang Rampasan</a></li>
</ul>
</li>
</ul>
</nav><!-- .nav-menu -->
I have some HTML, CSS and JQuery Code. When I do slide down and up, I want to change my "h3" background color with jquery like the below image, it should be reddish. As a result, when I slide down, it must be changed with jquery code.
My accordion sidebar code is :
`<div id="accordion">
<ul>
<li class="active">
<h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li >
<h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class">
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-edit"></i></span>Publish</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="far fa-comments"></i></span>Engage</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-volume-up"></i></span>Listen</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud"><i class="fas fa-chart-line"></i></span>Report</h3>
<ul>
<li class="accordion-li">Lorem</li>
<li class="accordion-li">Ipsum</li>
</ul>
</li>
</ul>
</div>`
My Accordion Css code is:
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color:#fff;
}
#accordion h3{
text-transform: uppercase;
font-size:12px;
line-height:34px;
padding:10px 10px;
cursor:pointer;
}
#accordion h3:hover{
background-color: #f55661;
}
#accordion h3:link{
background-color:red;
}
/* links */
#accordion ul ul li a{
color:white;
display:block;
font-size:11px;
line-height:27px;
padding: 0 15px;
text-decoration:none;
transition: all .1s;
background-color: #32363a;
}
/* hover effect */
#accordion ul ul li a:hover{
background-color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul{
display:none;
}
#accordion li.active ul{
display:block;
}
/* Icon font styles */
#accordion h3 span{
font-size:16px;
padding-right:10px;
}
i{
font-weight: 100;
color:#f55661;
}
h3:hover i{
color: #fff;
}
I have to change my jquery code. Here we are :
$("#accordion h3").click(function(){
// slide up the list
$("#accordion ul ul").slideUp("fast");
//$( "#accordion ul li h3 ").css('background-color', '#f55661 ');
// slide down if it is closed
if(!$(this).next().is(":visible")){
$(this).next().slideDown("fast")
}
})
Edit:I added this code but it makes all h3 reddish. I have to choose specific one, like "this" command.
$("#accordion ul li h3").css('background-color', '#f55661 ');
You can toggle a class that applies the background color using the .toggleClass() function.
Additionally, you have to loop through all other lists and remove the open class. This can be done via siblings().find('h3').removeClass('open'), which loops through all siblings, finds the h3 element and removes the open class.
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 12px;
line-height: 34px;
padding: 10px 10px;
cursor: pointer;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:link {
background-color: red;
}
.tooltip.open {
background-color: #f55661;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
background-color: #32363a;
}
/* hover effect */
#accordion ul ul li a:hover {
background-color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
}
#accordion li.active ul {
display: block;
}
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
i {
font-weight: 100;
color: #f55661;
}
h3:hover i {
color: #fff;
}
.open {
background-color: #f55661;
}
.open i{
color:white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
</ul>
</div>
As mentioned in Spectric's answer, toggling classes is probably ideal, especially if you want to apply CSS transitions to make the color change smoother.
However, given the trajectory you were on, you can accomplish what you're trying to do with the following jQuery:
$("#accordion h3").click(function(){
// Close all previously-opened menu items
$("#accordion ul ul").slideUp("fast");
// Reset color of all h3s to dark gray
$('#accordion h3').css('background-color', '#393d42')
// then...
// For the clicked header, set red bg color
$(this).css('background-color', '#f55661');
// and slide it's sub menu open
$(this).next().slideDown("fast")
})
So my problem is just as simple as the title, when I click the big black "V" to toggle my menu, the animation jumps on the <li> with the sub menu.
I tried multiple things and none seem to work, I had a similar issue with the width which I solved by setting width to 100%. On my search I saw people that jQuery can't figure out the height of the elements but if I try to add height to the elements it totaly breaks the menu.
Here's the codepen so you can experience my problem. CODEPEN
HTML
<nav class="main-menu">
<ul>
<li class="level-1">Item 1
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 1.1
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.1.1</li>
<li class="level-3">Item 1.1.2</li>
<li class="level-3">Item 1.1.3</li>
<li class="level-3">Item 1.1.4</li>
</ul>
</li>
<li class="level-2">Item 1.2
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.2.1</li>
<li class="level-3">Item 1.2.2</li>
</ul>
</li>
<li class="level-2">Item 1.3</li>
</ul>
</li>
<li class="level-1">Item 2
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 2.1</li>
<li class="level-2">Item 2.2</li>
<li class="level-2">Item 2.3</li>
<li class="level-2">Item 2.4</li>
<li class="level-2">Item 2.5</li>
</ul>
</li>
<li class="level-1">Item 3</li>
<li class="level-1">BItem 4
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 4.1</li>
<li class="level-2">Item 4.2</li>
</ul>
</li>
</ul>
</nav>
CSS
.main-menu .sub-menu-1, .main-menu .sub-menu-2 {
display: none;
}
.main-menu ul {
width: 100%;
}
.main-menu li {
line-height: 25px;
}
.main-menu li.level-1 {
background-color: red;
}
.main-menu li.level-2 {
background-color: lightblue;
}
.main-menu li.level-3 {
background-color: yellow;
}
.main-menu a {
display: block;
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: block;
float: right;;
font-size: 20px;
font-weight: bold;
width: 20px;
transform: translateY(-25px);
}
Javascript/jQuery
$(document).ready(function() {
$('.sub-menu-1, .sub-menu-2').hide();
$('.toggle-1').click( function() {
$(this).next('.sub-menu-1').slideToggle();
});
$('.toggle-2').click( function() {
$(this).next('.sub-menu-2').slideToggle();
});
});
Thank you in advance and hope somenone can help me out.
The issue is arising from the <span> that you have set to display: block; in your css.
Switching .main-menu a and .main-menu .toggle-1, .main-menu .toggle-2 to both be display: inline-block; fixes the issue. You can then also remove some additional unnecessary css hacks that you were previously using to forcibly place these elements outside of their document flow position.
The updated CSS is below, and you can see a fork of the pen with both sub-menus working here
.main-menu a {
display: inline-block;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: inline-block;
float: right;
font-size: 20px;
font-weight: bold;
width: 20px;
}
I think the only problem is that you didn't set the clear property to your float. If you set it like:
.main-menu a {
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
float: right;
clear: none;
font-size: 20px;
font-weight: bold;
width: 20px;
}
you are good. Then you also don't need the transform: translate to shift your elements back. Here's a fork of your codepen: http://codepen.io/anon/pen/WwbPLV
I have a top menu with various links. On hover, each should show a dropdown with additional menu items. I have tried attached onmouseover and onmouseleave events to the menu item to hide/show the sub menu; however, when transitioning off of the menu item and into the sub menu, the onmouseleave fires and hides the sub menu and the user doesn't have a chance to actually interact with the sub menu.
<nav>
<div class="container-fluid">
<ul class="">
<li>
<a ui-sref="home.person" ng-init="showPersonSubMenu=false" ng-mouseenter="showPersonSubMenu=true" ng-mouseleave="showPersonSubMenu=false">People</a>
<ul class="person-sub-menu" ng-show="showPersonSubMenu">
<li>Add Person</li>
</ul>
</li>
<li><a ui-sref="home.company">Companies</a></li>
<li><a ui-sref="home.job">Jobs</a></li>
<li><a ui-sref="home.report">Reports</a></li>
</ul>
</div>
</nav>
How can I show the sub menu on hover, and hide it on leaving... whilst still allowing the user to actually access the sub menu so it doesn't hide before they can interact with it.
You were on the right track.
Make sure there is no space between your menu item and your absolute sub-menu. To ensure that there is no space, make the menu item bigger (using height or line-height), or add a padding to it...
Here's a working example:
http://codepen.io/jlowcs/pen/QwJwJZ
HTML:
<ul class="menu">
<li>
<a>People</a>
<ul class="sub-menu">
<li>Add Person</li>
<li>Action 2</li>
</ul>
</li>
<li><a ui-sref="home.company">Companies</a></li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu {
background: lightblue;
height: 30px;
padding: 0 10px;
}
.menu > li {
display: inline-block;
width: 100px;
line-height: 30px;
}
.sub-menu {
position: absolute;
display: none;
background-color: lightgreen;
padding: 5px;
}
.sub-menu > li {
display: block;
cursor: pointer;
}
li:hover .sub-menu {
display: block;
}
EDIT: if you want your submenu to float lightly lower, here's a way of doing that:
http://codepen.io/jlowcs/pen/dPQPxW
Just add the following CSS:
.sub-menu {
margin-top: 10px;
}
.menu > li:hover {
padding-bottom: 10px;
}
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>
`