出现在主菜单下方的 jQuery 幻灯片菜单

Question

我用下面的代码创建了一个固定的 <header>由 <image> 组成和一个 <navigation> .现在我想将子菜单添加到 <navigation>正如您在 <button> 中看到的那样和 <SlideItem>部分。

到目前为止，幻灯片功能完美运行。但是，它确实出现在主菜单的旁边，而不是在其下方。好像它卡在了 <li> 里面按钮。

我必须在我的代码中更改什么，以便 sub-menus出现在主菜单下方？

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%; 
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align:center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align:center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content{
  width: 80%;
  margin-top: 10%; 
  margin-left: 10%; 
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.SlideItem {
  display: none;
}

.SlideItem {
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">	
  <div class="image">
  Image
  </div>
  <nav class="navigation"> 
    <ul>
      <li class="button"> 1.0 Main Menu 
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
          <li> 1.3 Sub Menu </li>     
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>
</div>

你也可以找到我的代码here .

Answer 1

在 SlideItem 上使用 position:absolute 相对于直接父级，并避免直接在元素上使用 css，例如你已经使用了 ul { height: 100%;display:flex; ... 它会将 css 应用于所有 ul 元素，更好的方法是使用类或继承。

$(document).ready(function() {
  $(".button").mouseenter(function() {
    $(this).children(".SlideItem").slideDown(500);
  });
  $(".button").mouseleave(function() {
    $(this).children(".SlideItem").slideUp(500);
  });
});

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation > ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation > ul > li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}
.button{
  position:relative;
}
.SlideItem {
  display: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
  margin:0;
}
.SlideItem li{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">

  <div class="image">
    Image
  </div>

  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="SlideItem">
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
          <li> 1.1 Sub Menu </li>
        </ul>
      </li>
      <li> 2.0 Main Menu </li>
      <li> 3.0 Main Menu </li>
    </ul>
  </nav>

</div>