Sub menu inside responsive menu - css

Question

Hey I'm having some issues with my mega menu. Im trying to mimic Newegg's style. I want a small sub menu to show up on hover. Here is my codepen: https://codepen.io/iamgonge/pen/vxEEeN
I'm trying to make the sub menu line up with the caret in each menu link. right now it stays in the same spot,When I change it from Absolute it pushes everything 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;
}
header.dd-blue ul.main-nav>li>a {
border-right: 1px solid #666;
}
/* List Separator: Inner Border */
ul.main-nav>li>a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
header.dd-blue ul.main-nav>li>a:after {
background-color: #999;
}
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav>li>a.mega-menu>span {
display: block;
vertical-align: middle;
}
ul.main-nav>li>a.mega-menu>span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav>li:hover>a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
}
.sub-menu-lists li {
line-height: 1;
}
/* 5 Columns */
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
/* end 5 columns */
#rds-font {
font-size: 15px;
}
a, a:active, a:visited, a:link {
color: #599ab9;
text-decoration: none;
}
a:hover {
color: black;
}
#left-border {
border-left: 1px solid #666;
}
/* Hover dropdown */
.dropdown ul.dropdown-menu {
margin-top: 0;
}
.hover_drop_down:hover ul.dropdown-menu {
margin-top: 2px;
}
.hover_drop_down:hover ul.dropdown-menu {
display: inline-block;
position: absolute;
top: 25px;
left: 90%;
z-index: 1;
}
.dropdown-menu>li>a {
display: block;
margin: 10px: padding-bottom: 10px;
font-size: 13px;
font-weight: 500;
line-height: 1;
color: #599ab9;
}
<header class="dd-blue">
<nav role="navigation">
<ul class="main-nav">
<li class="top-level-link">
<a class="mega-menu" id="left-border"><span>Main 1</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-xs-15">
<h2 class="sub-menu-head">Header 1</h2>
<ul class="sub-menu-lists">
<li class="hover_drop_down">
Item with sub-menu<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item X</li>
</ul>
</li>
<li class="hover_drop_down">
Item with sub-menu<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item X</li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!--end of sub-menu-block -->
</li>
</ul>
</nav>
</header>

Answer 1

Set position: absolute; display: inline-block; and remove any left and top values so that the element will display where it is in the DOM.
/* 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;
}
header.dd-blue ul.main-nav>li>a {
border-right: 1px solid #666;
}
/* List Separator: Inner Border */
ul.main-nav>li>a:after {
content: '';
width: 1px;
height: 62px;
position: absolute;
right: 0px;
top: 0px;
z-index: 2;
}
header.dd-blue ul.main-nav>li>a:after {
background-color: #999;
}
/* Drop Down/Up Arrow for Mega Menu */
ul.main-nav>li>a.mega-menu>span {
display: block;
vertical-align: middle;
}
ul.main-nav>li>a.mega-menu>span:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: '';
background-color: transparent;
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
ul.main-nav>li:hover>a.mega-menu span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 0px solid transparent;
border-bottom: 5px solid #666;
}
}
.sub-menu-lists li {
line-height: 1;
}
/* 5 Columns */
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
/* end 5 columns */
#rds-font {
font-size: 15px;
}
a, a:active, a:visited, a:link {
color: #599ab9;
text-decoration: none;
}
a:hover {
color: black;
}
#left-border {
border-left: 1px solid #666;
}
/* Hover dropdown */
.dropdown ul.dropdown-menu {
margin-top: 0;
}
.hover_drop_down:hover ul.dropdown-menu {
position: absolute;
display: inline-block;
z-index: 1;
left: auto;
top: auto;
}
.caret-right {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 5px solid;
border-left-color:#1c2b36;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<header class="dd-blue">
<nav role="navigation">
<ul class="main-nav">
<li class="top-level-link">
<a class="mega-menu" id="left-border"><span>Main 1</span></a>
<div class="sub-menu-block">
<div class="row">
<div class="col-xs-15">
<h2 class="sub-menu-head">Header 1</h2>
<ul class="sub-menu-lists">
<li class="hover_drop_down">
Item with sub-menu<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item X</li>
</ul>
</li>
<li class="hover_drop_down">
Item with sub-menu<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item X</li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!--end of sub-menu-block -->
</li>
</ul>
</nav>
</header>