Местоположение раскрывающегося меню HTML/CSS

Question

У меня возникли проблемы с созданием выпадающего меню с HTML & CSS. Я получил часть HTML (я думаю).

<div id="Nav"> 
    <ul> 
     <li class="Navigation"><a href="" class="Nav_Text">Item 1</a></li> 
     <li class="Navigation"><a href="" class="Nav_Text">Item 2</a></li> 
     <li class="Navigation"><a href="" class="Nav_Text">Item 3</a></li> 
     <li class="Navigation"> 
      <a class="Nav_Text">Item 4</a> 
      <ul class="sub-menu"> 
       <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item1</a></li> 
       <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item2</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Вот что у меня есть для CSS

.submenu 
{ 
    display: none; 
} 

#Nav ul li:hover > ul 
{ 
    display: block; 
    position: absolute; 
    /*The rest of the code is just for looks and doesn't effect the position*/ 
} 

Вопрос, который я имею, что выпадающее меню не отображается под пункт 4, но вместо того, чтобы в крайнем левом положении экрана. Может ли кто-нибудь помочь мне с позиционированием выпадающего меню под пунктом 4? И не устанавливая маржу. Я попробовал это, и когда экран изменился, выпадающее меню было отключено.

спасибо заранее.

Answer 1

попытаться дать class="sub-menu" position:relative

.sub-menu{ 
    position:relative; 
} 

Не уверен, что он будет работать :)

Не судим его.

Answer 2

при использовании

позиция: абсолютная;

на дочерние элементы подсписка вы должны установить родительский Ли в

положение: относительная;

#Nav > ul > li{ 
    position: relative; 
}