Показать вертикальное подменю ребенка непосредственно под родительским элементом

Question

Я работаю на этом сайте: http://www.tcsdesignreno.com/fsw/ в WordPress 4.1.

Тема, которую я использую, имела горизонтальное подменю, которое просто не сработало для нас, поэтому мы хотели переключить его на вертикальный. Я его так, что меню теперь по вертикали, добавив следующий код CSS:

ul.sub-menu {width:200px;} 
.sub-menu li { width: 100%;} 
.sub-menu li a {display:block; width: 100%;} 

Единственная проблема у меня есть, что в меню отображается на левой, и я хотел бы, чтобы показать под родителю пункт.

Вот HTML для одного из пунктов меню:

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1192"><a href="http://www.tcsdesignreno.com/fsw/?page_id=1133" class="sf-with-ul">Conference Info&nbsp;<i class="icon-angle-down"></i></a> 
<ul class="sub-menu"> 
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1194"><a href="http://www.tcsdesignreno.com/fsw/?page_id=1135">Attendee Registration</a></li> 
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1196"><a href="http://www.tcsdesignreno.com/fsw/?page_id=1145" class="sf-with-ul">Photo Gallery<i class="icon-angle-down"></i></a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1278"><a href="http://www.tcsdesignreno.com/fsw/?page_id=1270">Exhibit Hall</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1277"><a href="http://www.tcsdesignreno.com/fsw/?page_id=1271">Classroom Sessions</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1279"><a href="http://www.tcsdesignreno.com/fsw/?page_id=1272">Reception</a></li> 
    </ul> 
</li> 
</ul> 
</li> 

Я знаю, что это должно быть легко, но я просто не могу вспомнить, как это сделать.

Также, если есть так или иначе, чтобы подменю внука вылететь направо, что было бы неплохо, но если бы оно не оставалось так, как сейчас.

Answer 1

добавить свойство "позиции: относительный" в класс названный как .mainmenu литий

.mainmenu li { 
line-height: 1.7; 
position: relative; //please add this code 

}