Jump to content

Submenu where art thou?

Recommended Posts

Hi, first post. :)

Recently I discovered Dave Bushell's Off Canvas menu. His description of it is here:


It's a nice menu and I've been able to incorporate it into a website. But what I have been trying to do yet not able is to figure for submenu(s) dropdowns from the categories. An example of this is the W3 Schools simple css dropdowns:


The coding is simple enough and I thought I could use it for Bushell's menu. When I did so the submenus appear on the page like the other categories. When collapsed to mobile the submenus show (fixed, not where you click/touch for dropown) so in that sense it's okay since for the moment I don't need that many submenus.

So, the thing is how can I code it for a simple dropdown when you hover over a category? I've tried different methods along with the W3 example but I usually end up with things like half the dropdowns showing, the submenus showing in the collapsed part but with erratic styling completely different than what is originally there, and so on.

I'm sure for someone here on the forum it's a breeze to do this but for me it's been a little on the windy side. :-)

Thanks for any help and suggestions.


Share this post

Link to post
Share on other sites

I haven't uploaded my page yet but here is the page I've been working from. You can get the source code and css from it. Notice the chapter 1-5 titles. I just want a dropdown from one or two of them and if possible that they show in the collapsed mobile view. As to whether in the mobile view they show fixed or with dropdown I'm not sure if that's automatic or requires other code..


Share this post

Link to post
Share on other sites

It definitely requires additional CSS for the <ul> you will add for dropdown and also some additional JS to handle it when it is collapsed.

You need to apply display: block; to the <li>s in the dropdown menu so that they stack up on top of each other. Also, you might need to remove overflow: hidden; from the #nav or the dropdown will always be hidden under it.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...