爲什麼我的下拉菜單不工作？

-1

https://codepen.io/Nathan-Callum-Marshall/pen/ayemGa 爲什麼我的下拉菜單不工作？

有人請向我解釋爲什麼我不能讓我的子菜單顯示？我已經嘗試了所有我沒有理解我出錯的地方。我添加了徘徊im不知道如果即時通話正確的事情。我相信這很簡單，但我只是開始，這是我一直想弄清楚如何做，因爲它無處不在。

.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>

來源

2017-09-09 Nathan Callum Marshall

你的子菜單需要成爲CSS的主菜單的子元素才能定位它。 –

如果第二個'ul'不在'li'裏面，那麼它不是一個子菜單。 –

另外'ul'不能是另一個'ul'的直接子。 –

你可以在這裏工作了。基本上你的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>

來源

2017-09-09 12:32:01 Jonathan

爲什麼我的下拉菜單不工作？

回答

相關問題