Question

我正在使用此网站：WordPress 4.1中的http://www.tcsdesignreno.com/fsw/。

我正在使用的主题有一个水平子菜单，它对我们不起作用，所以我们想把它切换到垂直。我有它，所以通过添加以下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”添加到名为.mainmenu li

的类中

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

}

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

1 个答案: