在父項目下直接顯示垂直子菜單子項

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 

}