Hi, I'm currently facing some challenges with my mega menu. My goal is to replicate the style of Newegg's mega menu where a small sub-menu appears upon hovering over a menu item. You can view my Codepen example here: https://codepen.io/iamgonge/pen/vxEEeN
The issue I'm encountering is aligning the sub-menu with the caret icon in each menu link. Currently, the sub-menu stays in the same position and when I change it from Absolute positioning, it causes the content to shift down on hover.
/* Body */
body {
margin: 0px;
padding: 0px;
font-family: Helvetica;
background-color: #fff;
}
header {
min-height: 450px;
}
header.dd-blue {
background-color: #fff;
}
/* Nav */
nav {
position: relative;
}
header.dd-blue nav {
background-color: #4F96BA;
}
ul.main-nav {
list-style-type: none;
padding: 0px;
font-size: 0px;
max-width: 1000px;
margin: 0 auto;
}
ul.main-nav h2 {
font-size: .9em;
font-weight: 300;
}
ul.main-nav>li {
display: inline-block;
padding: 0;
}
ul.main-nav>li>a {
display: block;
padding: 20px 30px;
position: relative;
color: #fff;
font-size: 15px;
font-weight: 400;
box-sizing: border-box;
}
ul.main-nav>li:hover {
background-color: #f9f9f9;
}
ul.main-nav>li:hover>a {
color: #333;
font-weight: 400;
}
ul.main-nav>li ul.sub-menu-lists {
margin: 0px;
padding: 1px;
list-style-type: none;
display: block;
}
ul.main-nav>li ul.sub-menu-lists>li {
padding: 0 0px;
margin-top: 2px;
}
ul.main-nav>li ul.sub-menu-lists>li>a {
font-size: .84em;
font-weight: 500;
}
.sub-menu-head {
margin: 10px 0;
border-bottom: 1px solid #4F96BA;
width: 100%;
}
@media only screen and (min-width: 769px) {
/* Desktop */
ul.main-nav {
display: block;
position: relative;
}
.sub-menu-block {
padding: 15px;
}
/* Sub-menu */
ul.main-nav>li>div.sub-menu-block {
visibility: hidden;
background-color: #f9f9f9;
position: absolute;
margin-top: 0px;
width: 100%;
color: #333;
left: 0;
box-sizing: border-box;
z-index: 3;
font-size: 16px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
opacity: 0;
/*CSS animation applied for sub menu : Slide from Top */
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
}
ul.main-nav>li:hover>div.sub-menu-block {
background-color: #fff;
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
ul.main-nav>li>div.sub-menu-block>* {
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
opacity: 0;
}
ul.main-nav>li:hover>div.sub-menu-block>* {
opacity: 1;
}
.sub-menu-head {
font-size: 20px;
}
[...]
</li>
</ul>
</div>
</div>
</div> <!--end of sub-menu-block -->
</li>
</ul>
[...]