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">
<a href="https://website.com/product-category/face-makeup/">Face Makeup</a>
</button>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/eye-makeup/">Eye Makeup</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/eye-makeup/cake-eyeliner/">Cake Eyeliner</a>
<a href="https://website.com/product-category/eye-makeup/t-shirts/">T-shirts</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/lip-makeup/">Lip Makeup</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/lip-makeup/luminized-lips/">Luminized Lips</a>
<a href="https://website.com/product-category/lip-makeup/lip-pencil/">Lip Pencil</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/accessories/">Accessories</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/accessories/eye-lashes/">Eye Lashes</a>
<a href="https://website.com/product-category/accessories/palletes/">Palletes</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/brushes/">Brushes</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/brushes/synthetic%e2%80%ac%e2%80%ac-vegan%e2%80%ac%e2%80%ac-brushes%e2%80%ac%e2%80%ac/">Synthetic Vegan Brushes</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/dermalogica/">Dermalogica</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/dermalogica/age-smart/">Age Smart</a>
<a href="https://website.com/product-category/dermalogica/clear-start/">Clear Start</a>
<a href="https://website.com/product-category/dermalogica/daily-defense/">Daily Defense</a>
<a href="https://website.com/product-category/dermalogica/powerbright/">Powerbright</a>
<a href="https://website.com/product-category/dermalogica/skin-health/">Skin Health</a>
<a href="https://website.com/product-category/dermalogica/system-medibac-clearing/">System Medibac Clearing</a>
<a href="https://website.com/product-category/dermalogica/ultracalming/">Ultracalming</a>
</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
codeInstead 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">
<a href="https://website.com/product-category/face-makeup/">Face Makeup</a>
</button>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/eye-makeup/">Eye Makeup</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/eye-makeup/cake-eyeliner/">Cake Eyeliner</a>
<a href="https://website.com/product-category/eye-makeup/t-shirts/">T-shirts</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/lip-makeup/">Lip Makeup</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/lip-makeup/luminized-lips/">Luminized Lips</a>
<a href="https://website.com/product-category/lip-makeup/lip-pencil/">Lip Pencil</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/accessories/">Accessories</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/accessories/eye-lashes/">Eye Lashes</a>
<a href="https://website.com/product-category/accessories/palletes/">Palletes</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/brushes/">Brushes</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/brushes/synthetic%e2%80%ac%e2%80%ac-vegan%e2%80%ac%e2%80%ac-brushes%e2%80%ac%e2%80%ac/">Synthetic Vegan Brushes</a>
</div>
</div>
<div class="category">
<button class="dropdown">
<a href="https://website.com/product-category/dermalogica/">Dermalogica</a>
</button>
<div class="category-content">
<a href="https://website.com/product-category/dermalogica/age-smart/">Age Smart</a>
<a href="https://website.com/product-category/dermalogica/clear-start/">Clear Start</a>
<a href="https://website.com/product-category/dermalogica/daily-defense/">Daily Defense</a>
<a href="https://website.com/product-category/dermalogica/powerbright/">Powerbright</a>
<a href="https://website.com/product-category/dermalogica/skin-health/">Skin Health</a>
<a href="https://website.com/product-category/dermalogica/system-medibac-clearing/">System Medibac Clearing</a>
<a href="https://website.com/product-category/dermalogica/ultracalming/">Ultracalming</a>
</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>