悬停菜单 - 内容向下移动＆amp;向上

时间：2017-08-26 11:37:33

标签： html css menu hover visual-composer

尝试创建一个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对两者进行修复，但似乎无法使其正常工作...
任何想法？
谢谢你

1 个答案:

答案 0 :(得分：1)

您应该使用position: relative;。

，而不是使用position:absolute

这样，打开菜单的位置不会影响页面的其余部分：

.category-content {
  ...
  position: absolute;
  ...
}
  

请注意，您还有其他位置问题我没有修复，您可能会在原始代码中修复它们，可能这里缺少一些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: 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>

相关问题
最新问题