Question

使用以下代码，我创建了一个由<header>和<image>组成的固定<navigation>。到目前为止，这一切都很完美。

现在我想将sub-sub-menus插入<navigation>，如您在 HTML 下所示：

1.3.1
1.3.2
1.3.3

2.2.1
2.2.2
2.2.3

我希望那些sub-sub-menus在他们的button中显示接下来。但是，在我目前的代码中，它们根本没有出现。

我需要更改哪些内容，以便sub-sub-menus向<{1}}显示？

您还可以找到我的代码here。

button

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_01, .button_02 { position: relative; } .SlideItem_01, .SlideItem_02 { max-height:0px; overflow:hidden; transition: max-height .5s linear; width: 100%; position: absolute; top: 100%; left: 0; padding: 0; margin: 0; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: lime; } .button_01:hover .SlideItem_01 { max-height: 100px; } .button_02:hover .SlideItem_02 { max-height: 100px; } .SlideItem_01 li, .SlideItem_02 li { display: block; } .SlideItem_02 { width: 100%; position: absolute; left: 100%; top: 0; padding:0; }

Answer 1

由于#content_area { float: center; text-align: justify; font-size: 2.2em; max-width: 1080px; width: 100%; margin: 20px 0 20px 0; margin: 0 auto; padding: 10px; }中的overflow:hidden;隐藏了第三级菜单，所以我只需删除它并添加ul

＆＃13;

opacity

＆＃13;

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_01, .button_02 {
 position: relative;
}

.SlideItem_01, .SlideItem_02 {
  max-height:0;
  /*overflow:hidden;*/
  opacity: 0;
  transition: max-height .5s linear, opacity .5s linear;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

.button_01:hover .SlideItem_01 {
  max-height: 100px;
  opacity:1;
}

.button_02:hover .SlideItem_02 {
  max-height: 100px;
   opacity:1;
}

.SlideItem_01 li, .SlideItem_02 li  {
 display: block;
}

.SlideItem_02 {
 width: 100%;
 position: absolute;
 left: 100%;
 top: 0;
 padding:0;
 }

＆＃13;

子子菜单不显示

1 个答案: