Hi,
I am trying to align the drop down menu to the main categories menu but to no avail, I have tried the usual overflow:hidden, z-index and the position absolute but nothing seems to work.
In the photo I am trying to get the black area lined up to the bottom of the maroon header menu.
I have posted my CSS code below
Any advice gratefully received.
Using Version 4.20 with Default clean theme.
Regards
https://www.flickr.com/photos/185321986@N02//*** NAVIGATION ***/
.header-menu {
position: relative;
z-index: 5;
width: 100%;
margin: 0 auto 30px;
background-color: #840541;
padding: 10px 0;
text-align: center;
display: inline-block;
cursor: default;
}
.menu-toggle,
.sublist-toggle {
display: none;
}
.header-menu > ul {
display: block !important; /* prevents toggle display:none on resize */
font-size: 0;
width: 100%;
}
.header-menu > ul.mobile {
display: none !important;
}
.header-menu > ul > li {
display: inline-block;
/*border-left: 1px solid #ddd;*/
padding: 0 2px;
vertical-align: middle;
}
.header-menu > ul > li:first-child {
border-left: none;
list-style-type: none;
}
.header-menu > ul > li > a {
/*display: block;*/
padding: 5px 5px;
line-height: 20px;
font-size: 17px; /*reset zeroing*/
color: #fff;
/*cursor: pointer;*/
}
.header-menu > ul > li > a:hover {
color: #fff;
}
.header-menu .sublist {
display: none;
position:absolute;
width: 90%;
box-shadow: 0 0 2px rgba(0,0,0,0.0);
/*background-color: #840541;*/
background-color: #000;
padding: 10px 0;
text-align: left;
/*overflow: hidden;*/
margin-top: 0px;
z-index: 4;
}
.header-menu .sublist li {
width: 20%;
float: left;
display: block;
}
.header-menu .sublist li a {
display: block;
position: relative;
white-space: nowrap;
padding: 15px 10px 10px 10px;
font-size: 14px;
color: #000;
}
.header-menu .sublist li a:before {
position: absolute;
top: 17px;
left: 15px;
width: 5px;
height: 5px;
background-color: #ddd;
}
.header-menu .sublist li:hover > a {
/*background-color: #fff;*/
}
.header-menu ul li:hover > .sublist {
display: block;
}
.header-menu .sublist .sublist {
top: -10px;
left: 100% !important;
}