This is my current CSS code that I am working on. I am trying to create a multi-level menu in Blogger with submenus, sub-submenus, and sub-sub-submenus without disrupting the existing formatting.
.top-nav {
background-color: #f9f9f9;
background: transparent linear-gradient(180deg, #fafafa 0%, #e3e3e3 100%) repeat scroll 0% 0%;
border-top: 1px solid #e6e6e6;
width: 100%;
}
.top-nav .Pagemenu {
}
.Pagemenu {
display: block;
}
.Pagemenu li {
display: inline-block;
position: relative;
z-index: 10;
margin: 0;
}
.Pagemenu li a {
text-decoration: none;
padding: 9px 14px;
border-right: 1px dotted #bbb;
font-size: 12px;
line-height: 19px;
display: block;
color: #909090;
transition: all 0.2s ease-in-out 0s;
}
.Pagemenu li a:hover, .Pagemenu li:hover > a {
background: #eee;
}
.main-nav {
background-color: #0FBE7C;
background: transparent linear-gradient(180deg, #0FBE7C 0%, #0C9863 100%) repeat scroll 0 0;
display: block;
width: 100%;
}
.menu {
display: block;
}
.menu li {
display: inline-block;
position: relative;
z-index: 10;
}
.menu li:first-child {
margin-left: 0;
}
.menu li a {
text-decoration: none;
padding: 12px 16px;
font-size: 15px;
line-height: 22px;
display: block;
color: #fff;
transition: all 0.2s ease-in-out 0s;
}
...
I have encountered an issue when adding a sub-sub-submenu in HTML. It doesn't display properly on the webpage because it fails to show "all the child" elements. I tried modifying the HTML but couldn't figure out the corresponding CSS changes needed to make it work. Can someone provide assistance?
<nav>
<ul class='menu'>
// Navigation Menu Items Here
</nav>
<div class='clear' />