html - 无法使 CSS 子菜单显示在其父级下方

Question

我有一个呈现 html 菜单标记的模块。无法覆盖此标记。 因此，为了使菜单看起来像它，我必须编写一些自定义 CSS 代码。

问题是悬停时子菜单不会显示在其父菜单下方。

html:

<div class="moduletable_menu slider-menu">
   <ul class="menu">
      <li class="item-122 default current active"><a href="/skarda/en/">Products From Metal</a></li>
      <li class="item-126 menu-deeper menu-parent">
         <a href="#">Products<span class="menu-toggler"></span></a>
         <ul class="menu-child">
            <li class="item-123"><a href="/skarda/en/products/sliding-fence">Sliding Fence</a></li>
         </ul>
      </li>
   </ul>
</div>

CSS:

.slider-menu {
  display: block;  
}

.slider-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  z-index: 99;
  display: block;
  float: right;
  position: relative;
}

.slider-menu ul li {
  display: inline-block;
  position: relative;
  padding: 0;
}

.slider-menu ul li a {
  display: inline-block;
  padding: 0 15px;
  line-height: 60px;
  font-size: 14px;
  margin: 0;
  color:#fff;
}

.slider-menu  .menu-deeper.menu-parent{
  display: inline-block;
  position: relative;
  padding: 0;
  list-style: none;
}
.slider-menu  .menu-deeper.menu-parent li a{
  display: inline-block;
  padding: 0 15px;
  line-height: 60px;
  font-size: 14px;
  margin: 0;
}

.slider-menu > ul li.menu-deeper > a::after {

    font-family: "FontAwesome";
    content: "\f107";
    float: right;
    margin-left: 7px;

}

.slider-menu .menu-child {
  display: none;           
}

.slider-menu .menu-child li {
    display: block;
    padding: 0;
    position: relative; 
}

.slider-menu .menu-child li > a {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    padding: 8px 0;
    cursor: pointer;
}


.slider-menu .menu-deeper.menu-parent:hover > .menu-child {
  animation: spFadeInUp 400ms ease-in;
  display: block;

}


.slider-menu ul li a:hover {  
  color: red;
}        

JSFiddle

所以，我遗漏了一些东西......需要适当的更正。

Answer 1

添加position: absolute; top: 100%;到子菜单会将菜单绝对定位在父菜单的正下方 li与 position: relative;

.slider-menu .menu-child {
  display: none;       
  position: absolute;
  top: 100%;
}

body{
  background-color:black;
}
.slider-menu {
  display: block;  
  position:absolute;/*just to position  it to the left corner in the JSFiddle example*/
  top:0;
}

.slider-menu > ul {
  float: right;
}

.slider-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  z-index: 99;
  display: block;
  position: relative;
}

.slider-menu ul li {
  display: inline-block;
  position: relative;
  padding: 0;
}

.slider-menu ul li a {
  display: inline-block;
  padding: 0 15px;
  line-height: 60px;
  font-size: 14px;
  margin: 0;
  color:#fff;
}

.slider-menu  .menu-deeper.menu-parent{
  display: inline-block;
  position: relative;
  padding: 0;
  list-style: none;
}
.slider-menu  .menu-deeper.menu-parent li a{
  display: inline-block;
  padding: 0 15px;
  line-height: 60px;
  font-size: 14px;
  margin: 0;
}

.slider-menu > ul li.menu-deeper > a::after {

    font-family: "FontAwesome";
    content: "\f107";
    float: right;
    margin-left: 7px;

}

.slider-menu .menu-child {
  display: none;           
}

.slider-menu .menu-child li {
    display: block;
    padding: 0;
    position: relative;	
}

.slider-menu .menu-child li > a {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    padding: 8px 0;
    cursor: pointer;
}


.slider-menu .menu-deeper.menu-parent:hover > .menu-child {
  animation: spFadeInUp 400ms ease-in;
  display: block;
  position: absolute;
  top: 100%;
}


.slider-menu ul li a:hover {  
  color: red;
}


@keyframes spFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

<div class="moduletable_menu slider-menu">
   <ul class="menu">
      <li class="item-122 default current active"><a href="/skarda/en/">Products From Metal</a></li>
      <li class="item-126 menu-deeper menu-parent">
         <a href="#">Products<span class="menu-toggler"></span></a>
         <ul class="menu-child">
            <li class="item-123"><a href="/skarda/en/products/sliding-fence">Sliding Fence</a></li>
         </ul>
      </li>
   </ul>
</div>

更新

要水平匹配父文本，您可以匹配父级 <li> 的 15px 的内边距。有

.slider-menu .menu-child {
  display: none;       
  position: absolute;
  top: 100%
 padding: 0 15px;
}