與子菜單CSS的下拉菜單HTML

Question

我想創建一個下拉菜單與子菜單對齊的HTML/CSS中的父項，但我無法獲得對齊權。 現在，子菜單隻出現在列表的頂部，而不是與父級相同的級別。

下面是我在說什麼小提琴代碼：https://jsfiddle.net/h96jda5h/

我覺得它有什麼做的CSS導航屬性，但我不知道是什麼：

#nav ul{ list-style-type:none; padding:0; margin:0; } 
#nav ul li{ display:inline-block; } 
#nav ul li:hover{ background-color:#FFF; } 
#nav ul li a,visited{ display:block; padding:15px; text-decoration:none; } 
#nav ul li:hover >ul{ display:block;} 
#nav ul ul{display:none; position:absolute; background-color:#FFF; min-width:200px; } 
#nav ul ul li{ display:block;} 
#nav ul ul li:hover{ background-color:#F1F7F7; } 
#nav ul ul li"hover > ul{ display: block; } 
#nav ul ul ul{ margin: -52px 0 0 200px; background-color:#FFF; } 

我搜索了這個網站的答案，並找到了'sub'類的幫助，但是由於某種原因，它似乎不適合我。 任何建議會非常有幫助！謝謝！

Answer 1

你只是缺少一個單一的CSS指令：

position: relative

在這裏

#nav ul ul li{ display:block;}

說明：

絕對定位元素指的第一個父的絕對或相對定位。此時，子菜單考慮了ul而不是li

Answer 2

您需要將position: relative添加到絕對定位的ul的父li。

絕對定位元素相對於他們最近的祖先定位。任何非position: static（默認值）位置的父元素都被視爲祖先，因此將position: relative添加到li元素使其成爲其最接近的子元素的始祖ul。

http://learnlayout.com/position.html

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

以您目前的例子，你能做到這樣。

.sub { position: relative; } 

或這樣

#nav ul ul li { 
    display:block; 
    position: relative; 
} 

https://jsfiddle.net/h96jda5h/1/