menu on hover - content shifts down & up - html

Question

Trying to create a css menu:
<div style="" class="normal_height vc_row wpb_row vc_row-fluid shop_menu_row">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="shop_menu_container">
<div class="category">
<button class="dropdown">
Face Makeup
</button>
</div>
<div class="category">
<button class="dropdown">
Eye Makeup
</button>
<div class="category-content">
Cake Eyeliner
T-shirts
</div>
</div>
<div class="category">
<button class="dropdown">
Lip Makeup
</button>
<div class="category-content">
Luminized Lips
Lip Pencil
</div>
</div>
<div class="category">
<button class="dropdown">
Accessories
</button>
<div class="category-content">
Eye Lashes
Palletes
</div>
</div>
<div class="category">
<button class="dropdown">
Brushes
</button>
<div class="category-content">
Synthetic‬‬ ‫‪Vegan‬‬ ‫‪Brushes‬‬
</div>
</div>
<div class="category">
<button class="dropdown">
Dermalogica
</button>
<div class="category-content">
Age Smart
Clear Start
Daily Defense
Powerbright
Skin Health
System Medibac Clearing
Ultracalming
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper"></div>
</div>
</div>
</div>
</div>
</div>
With this css:
.shop_menu_row {
z-index: 1000;
}
.shop_content_row {
position: relative;
}
.shop_menu_container {
overflow: hidden;
background-color: #ffffff;
font-family: Arial;
width: 80%;
max-width: 80%;
display: flex;
justify-content: center;
margin: auto;
}
.shop_menu_container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: capitalize;
}
.category {
overflow: hidden;
/*margin: 0px auto;*/
margin: 0px 0px;
width: 12%;
display: inline-block;
text-align: center;
}
.category .dropdown {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.shop_menu_container a:hover, .category:hover .dropdown {
background-color: red;
}
.category-content {
display: none;
position: relative;
background-color: #ffffff;
min-width: 160px;
z-index: 1;
text-align: center;
}
.category-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.category-content a:hover {
background-color: red;
opacity: 1;
}
.category:hover .category-content {
display: block;
}
On hover category, entire content under (next div row) shifts down and up according to hover:
<div style="" class="normal_height vc_row wpb_row vc_row-fluid shop_content_row">
<div class="wpb_column vc_column_container vc_col-sm-3">
<div class="vc_column-inner ">
<div class="wpb_wrapper"></div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-9">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="wpb_single_image wpb_content_element vc_align_center">
<figure class="wpb_wrapper vc_figure">
<div class="vc_single_image-wrapper vc_box_shadow_border vc_box_border_grey">
<img width="960" height="640" src="https://website.com/wp-content/uploads/2017/08/brush-791306_960_720.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://website.com/wp-content/uploads/2017/08/brush-791306_960_720.jpg 960w, https://website.com/wp-content/uploads/2017/08/brush-791306_960_720-300x200.jpg 300w, https://website.com/wp-content/uploads/2017/08/brush-791306_960_720-768x512.jpg 768w" sizes="(max-width: 960px) 100vw, 960px">
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
Tried fixing this with z-index and position for both but can't seem to get it to work...
Any ideas?
Thank you
Sorry for the long code
the rows are constructed with visual-composer

Answer 1

Instead of using position: relative; you should use position:absolute.
This way the position of the open-menu will not interfere with the rest of your page:
.category-content {
...
position: absolute;
...
}
Note that you have other positions problems there what I didn't fix, you might have them fixed in your original code, probably some css is missing here.
.shop_menu_row {
z-index: 1000;
}
.shop_content_row {
position: relative;
}
.shop_menu_container {
overflow: hidden;
background-color: #ffffff;
font-family: Arial;
width: 80%;
max-width: 80%;
display: flex;
justify-content: center;
margin: auto;
}
.shop_menu_container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: capitalize;
}
.category {
overflow: hidden;
/*margin: 0px auto;*/
margin: 0px 0px;
width: 12%;
display: inline-block;
text-align: center;
}
.category .dropdown {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.shop_menu_container a:hover, .category:hover .dropdown {
background-color: red;
}
.category-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
z-index: 1;
text-align: center;
}
.category-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.category-content a:hover {
background-color: red;
opacity: 1;
}
.category:hover .category-content {
display: block;
}
<div style="" class="normal_height vc_row wpb_row vc_row-fluid shop_menu_row">
<div class="wpb_column vc_column_container vc_col-sm-12">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="shop_menu_container">
<div class="category">
<button class="dropdown">
Face Makeup
</button>
</div>
<div class="category">
<button class="dropdown">
Eye Makeup
</button>
<div class="category-content">
Cake Eyeliner
T-shirts
</div>
</div>
<div class="category">
<button class="dropdown">
Lip Makeup
</button>
<div class="category-content">
Luminized Lips
Lip Pencil
</div>
</div>
<div class="category">
<button class="dropdown">
Accessories
</button>
<div class="category-content">
Eye Lashes
Palletes
</div>
</div>
<div class="category">
<button class="dropdown">
Brushes
</button>
<div class="category-content">
Synthetic‬‬ ‫‪Vegan‬‬ ‫‪Brushes‬‬
</div>
</div>
<div class="category">
<button class="dropdown">
Dermalogica
</button>
<div class="category-content">
Age Smart
Clear Start
Daily Defense
Powerbright
Skin Health
System Medibac Clearing
Ultracalming
</div>
</div>
</div>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper"></div>
</div>
</div>
</div>
</div>
</div>
<div>Content under menu</div>