悬停菜单 - 内容上下移动

Question

正在尝试创建 css 菜单：

<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>

有了这个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;
}

在hover类别上，（下div行）下的全部内容根据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>

已尝试使用 z-index 和 position 解决此问题，但似乎无法正常工作...
有什么想法吗？
谢谢

抱歉久了code
这些行是用 visual-composer

Answer 1

而不是使用 position: relative; 你应该使用 position:absolute.

这样打开菜单的位置就不会干扰页面的其余部分：

.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>

悬停菜单 - 内容上下移动

menu on hover - content shifts down & up

html

css

menu

hover

visual-composer