なぜ私のドロップダウンは機能しませんか？

Question

https://codepen.io/Nathan-Callum-Marshall/pen/ayemGa

誰かが私のサブメニューを表示することができない理由を教えてください。私はどこに間違っていたのか理解していないすべてを試しました。私は正しいものを呼び出すかどうかわからないホバーを追加しました。私はこれが本当にシンプルだと確信していますが、私は始めているだけです。これはどこからでもできているので、私はいつもやっていたかったことです。

.dropmenu { 
 
    word-spacing:2px; 
 
    background-color:grey; 
 
    width:200px; 
 
    positiion:absolute; 
 
} 
 

 
.dropmenu a { 
 
    text-decoration:none; 
 
    list-style:none; 
 
    color:white; 
 
} 
 

 
.dropmenu li { 
 
    display: inline-block; 
 
    list-style:none; 
 
    background:black; 
 
    padding: 0.5em 1em; 
 
} 
 

 
.dropmenu li:hover { 
 
    display: inline-block; 
 
    list-style:none; 
 
    background:orange; 
 
    padding: 0.5em 1em; 
 
} 
 

 
.submenu { 
 

 
    text-decoration:none; 
 
    margin-left:75px; 
 
    position:absolute; 
 
    color:black; 
 
} 
 

 
.submenu li { 
 
    text-decoration:none; 
 
    list-style:none; 
 
    line-height:30px; 
 
    background-color:black; 
 
    padding-right:35px; 
 
    padding-left:35px; 
 
    display:none; 
 
} 
 

 

 
.submenu a { 
 
    text-decoration:none; 
 
    color:white; 
 
} 
 

 
.submenu li:hover { 
 
    text-decoration:none; 
 
    color:white; 
 
    background:orange; 
 
} 
 

 
.dropmenu:hover .submenu ul li a { 
 
    display:block; 
 
}

<ul class="dropmenu"> 
 

 
    <li><a href="#">Home</a></li> 
 
    <li class="drop"><a href="#">About <span style="font-size:10px">▼</span></a></li> 
 

 
</ul> 
 
<ul class="submenu"> 
 
    <ul class="show"> 
 
    <li><a href="#">Test</a></li> 
 
    <li><a href="#">Test</a></li> 
 
    <li><a href="#">Test</a></li> 
 
    <ul> 
 
</ul>

Answer 1

あなたはここからそれをうまくすることができます。基本的には、DOMの構造は、あなたのサブメニューが親メニュー項目の子であるようなものでなければなりません。

あなたはまだコードにあなたが望む方法を取得するためにいくつかの調整を行う必要がありますが、これは、あなたが正しい方向に向かっ取得するのに十分でなければなりません：

.dropmenu { 
 
    word-spacing:2px; 
 
    background-color:grey; 
 
    width:200px; 
 
    position:absolute; 
 
} 
 

 
.dropmenu a { 
 
    text-decoration:none; 
 
    list-style:none; 
 
    color:white; 
 
} 
 

 
.dropmenu ul { 
 
    padding: 0; 
 
} 
 

 
.dropmenu li { 
 
    display: inline-block; 
 
    list-style:none; 
 
    background:black; 
 
    padding: 0.5em 1em; 
 
} 
 

 
.dropmenu li:hover { 
 
    display: inline-block; 
 
    list-style:none; 
 
    background:orange; 
 
    padding: 0.5em 1em; 
 
} 
 

 
.submenu { 
 
    text-decoration:none; 
 
    position:absolute; 
 
    color:black; 
 
} 
 

 
.submenu li { 
 
    text-decoration:none; 
 
    list-style:none; 
 
    line-height:30px; 
 
    background-color:black; 
 
    padding-right:35px; 
 
    padding-left:35px; 
 
    display:none; 
 
} 
 

 

 
.submenu a { 
 
    text-decoration:none; 
 
    color:white; 
 
} 
 

 
.submenu li:hover { 
 
    text-decoration:none; 
 
    color:white; 
 
    background:orange; 
 
} 
 

 
.dropmenu li:hover .submenu li { 
 
    display:block; 
 
}

<ul class="dropmenu"> 
 

 
    <li><a href="#">Home</a></li> 
 
    <li class="drop"> 
 
    <a href="#">About <span style="font-size:10px">▼</span></a> 
 
    <ul class="submenu"> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
    </ul> 
 
    </li> 
 

 
</ul>