悬停菜单 - 内容下移及以上

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类别，下（下一格行）班全部内容向下和向上根据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; 
    ... 
} 

请注意，您有其他位置的问题还有什么我没修好，你可能有他们固定在您的原始代码，可能有些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>