親の下にサブメニューを表示する（中央のドロップダウンメニュー）

Question

私のhorisontalドロップダウンメニューに問題があります。 sub_menuは親の下に表示されません。誰も私がそれを得るのを助けることができますか？私は間違って何をしていますか？メニューを100％幅広く中央にしたい。 liため

nav { 
 
    max-width: 100%; 
 
    text-align: center; 
 
} 
 
nav > ul > li { 
 
    padding: 10px; 
 
    display: inline; 
 
} 
 
nav ul li a { 
 
    font-family: sans-serif; 
 
    font-size: 1em; 
 
    color: #000; 
 
} 
 
nav ul li:hover .sub_menu { 
 
    display: block; 
 
} 
 
.sub_menu { 
 
    display: none; 
 
    position: absolute; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">link 1</a> 
 
    </li> 
 
    <li><a href="#">link 2</a> 
 
     <ul class="sub_menu"> 
 
     <li><a href="#">link 2.1</a> 
 
     </li> 
 
     <li><a href="#">link 2.2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">link 3</a> 
 
     <ul class="sub_menu"> 
 
     <li><a href="#">link 3.1</a> 
 
     </li> 
 
     <li><a href="#">link 3.2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

2つのステップ

1.設定position: relative;：

nav > ul > li { 
padding: 10px; 
display: inline; 
position: relative; 
} 

2. 0：

.sub_menu { 
display: none; 
position: absolute; 
right: 0; 
} 

jsFiddle