CODEWITHSUNDEEP
wordpresssubmenu
MattM
MattM

Reputation: 3217

Display vertical submenu child directly under parent item

I am working on this site: http://www.tcsdesignreno.com/fsw/ in WordPress 4.1.

The theme I am using had a horizontal submenu that just didn't work for us so we wanted to switch it to vertical. I have it so that the menu is now vertical by adding the following CSS code:

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

The only problem I have is that the menu shows up on the left and I'd like it to show up under the parent item.

Here is the HTML for one of the menu items:

<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>

I know that this should be easy but I just can't remember how to do it.

Also if there is anyway to get the grandchild submenu to fly out to the right that would be nice but if not it can stay as it is for now.

Upvotes: 0

Views: 1355

Answers (1)

vrajesh
vrajesh

Reputation: 2942

add property "position : relative" to class named as .mainmenu li 

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

}

Upvotes: 1

Related Questions