Streaming live at 10am (PST)

Hover Menu Problem


#1

Hey,

I am having trouble formatting a menu that has dropdown sub-menu's. In preview mode it looks fine, once published, it does not work. The submenu's get spaced down enough of a distance to be out of range of the hover effect. The menu's I am referring to are the ones underneath the logo...

antigua.webflow.com

https://webflow.com/design/antigua?preview=323b35064b52620bfe98942be013129d

Let me know if you see a flaw in the CSS.

Thanks!

-Shawn


#2

Hi Shawn... I see you trying to do a sub-menu drop down using divs and text blocks and such... I would recommend you try to use a jquery UI menu instead, you will have cleaner code and probably better performance and less chance of something screwing up on a users experience.

http://jqueryui.com/menu/

Here at that page above, you can see some examples, but basically, you create a div that has an id and in that div you put an unordered list with list items, and each list item (that corresponds to a menu link) can also have it's own unordered list + list items so that it is nested and you thus create sub-menus...

I was looking at your preview page and I get what you are trying to do... I just think, if you really want the sub-menu, try to make one using jquery, and embed that to your site, using the html embed widget... There are code examples on the page above too, and you can practically copy and paste that code.... Another option is to check out some free menu creation tools like:

http://cssmenumaker.com/free-css-menus

and configure your menu online and then copy the code and paste into html embed widget in webflow...

While sub-menus with drop-down are not supported (yet) by webflow navbar widget, you can still use the html embed for this and many other purposes for things that have not yet been implemented yet in webflow... but these guys at webflow are amazing and will eventually get to all of it... smile


#3