直接在父项下显示垂直子菜单子项

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

将属性 "position : relative" 添加到 class 命名为 .mainmenu li

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

}

直接在父项下显示垂直子菜单子项

Display vertical submenu child directly under parent item

wordpress

submenu