Can I have a vertical sub-menu in a horizontal type CFMenu?

[Haitashi]

Hello everyone:

I have a CFMenu with the type set to horizontal. I'd like to have the sub-menu items open vertically. Is that possible?

Here is my code. I want the Portals sub-menu (Portal A, Portal B, Portal C) to open vertically instead of horizontally.

            <cfmenu name="topMenu" type="horizontal" fontsize="14" fontcolor="##7A7251"
               font="'Lucida Sans', verdana, sans-serif;" selectedFontColor="##F58026" 
                menustyle="background-image:url('../images/toplinks_bg.gif');"    
                bgColor="##FFFFFF" childstyle="float:center;border-style:solid;padding:0px;border-width:0px;display:inline;margin-left:45px;">
 
                    <cfmenuitem name="home" href="##" 
                    display="Home"/>
 
                <!--- The ColdFusion menu item has a pop-up menu. --->
                <cfmenuitem name="portals"
                        href="##" display="Portals" childstyle="border:0px;padding:2px 10px 2px 10px;">
                    <cfmenuitem name="fso"
                        href="##" display="Portal A"/>
                    <cfmenuitem name="fso"
                        href="##" display="Portal B"/>
                    <cfmenuitem name="fso"
                        href="##" display="Portal C"/>
                </cfmenuitem>
 
                <cfmenuitem name="logout" href="##" 
                    display="Logout"/>
            </cfmenu>

[acoder]

Aren't all sub-menus vertical? See third item here.

[Haitashi]

Acording to that link:

Menus can have submenus, but only the top menu can be horizontal. All children of a horizontal menu are vertical.

However, no matter if I set the menu type to horizontal or vertical, all the child nodes of "Portals" still open horizontally. Is this just me? O.o

I'm suspect of styling... Maybe there's some CSS misfit code that's affecting how it's being displayed. I'm gonna look into that and report back.

[Haitashi]

Yes, there are some styling issues. Apparently the site's styles are overriding the YUI CSS. I ran an instance of CFMenu on a blank page on the same server and it worked fine.

Very imp lesson learned. I will now hunt for the specific styles and make changes. I will also convey to our designer that he should use more specific styling. As far as I can tell, he applied styles to UL and LI. This looks like the cause of the problem.

[Haitashi]

Found the culprit:

#toplinks li {
display: inline;
}

The div class where I placed the CFMenu was called toplinks. This display attributed caused the sub menu to open horizontally instead of the default vertical. Good to know that there's a way to do that since by default submenu will open vertically and there's no clear way to change it.

So, in case anyone ever needs vertical sub menus in CFMenu - There ya go! jeje

[acoder]

Thanks for posting the solution and, what do you know, you've actually discovered a way to display sub-menus horizontally should anyone need it.