0
以下のコードでは<header>を作成し、<image>と<navigation>で構成しました。すべてこれまで完全に動作します。サブサブメニューは表示されません
今、私はあなたが下HTMLに見ることができるよう<navigation>にsub-sub-menusを挿入したい：
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が彼らのbuttonに右次に表示されますので、変更することは何がありますか？
私のコードhereもあります。
ulであるため
overflow:hidden;の隠れ
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;
}<div class="header"> \t
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li class="button_01"> 1.0 Main Menu
<ul class="SlideItem_01">
<li> 1.1 Sub Menu </li>
<li> 1.2 Sub Menu </li>
<li class="button_02"> 1.3 Sub Menu
<ul class="SlideItem_02">
<li> 1.3.1 Sub Menu </li>
<li> 1.3.2 Sub Menu </li>
<li> 1.3.3 Sub Menu </li>
</ul>
</li>
</ul>
</li>
<li class="button_01"> 2.0 Main Menu
<ul class="SlideItem_01">
<li> 2.1 Sub Menu </li>
<li class="button_02"> 2.2 Sub Menu
<ul class="SlideItem_02">
<li> 2.2.1 Sub Menu </li>
<li> 2.2.2 Sub Menu </li>
<li> 2.2.3 Sub Menu </li>
</ul>
</li>
</ul>
</li>
<li> 3.0 Main Menu </li>
</ul>
</nav>
</div> \t
こんにちはマニッシュを追加し、あなたに感謝答えはアニメーションのテキストf最初にadesInを実行してから、背景（カラーライム）に短い遅延があります。どのように一緒にフェードインさせることができますか？ – Michi
この例では、最大高さと不透明度にトランジションが適用されています。私はあなたが 'transition：all .5s linear'を、各プロパティの遷移ではなく、動作させると思っています。 –
私はこれをhttps://jsfiddle.net/vu0hnqab/50/で試しましたが、うまくいかないようです。 – Michi