I’m using the Superfish menu to create a vertical drop-down menu with 1 submenu. The menu itself consists of chapters and sections of a book. Since the website is a “book” I’d like to have the vertical menu, which is placed in a sidebar, to be fixed as the user scrolls through the content. The menu works great except for the fact that for items that are lower in my menu, the submenu gets cut-off; only some of the items show due to the fixed nature of the sidebar.
My question then is whether there might be a CSS fix so that for lower items in the menu I can bump up the submenu: for example, could I make my sub-menu be even with the main menu on the 2nd or third item as opposed to the first, giving it more space for the submenu.
Regardless, a picture is worth a thousand words, so if you check out
This is why fixed menus with dropdowns are not a great idea: at the very least, users are required to have a screen that is x-pixels tall. With people using everything from tiny mobiles to ginormous television sets, you’re talking a thin line anyway.
But, there is an answer for most desktops:
I notice every single li has the same class (current). Why? If every child of an element has the same class, then you automatically know you’re doing something wrong, because CSS lets you select things like ul li.
But, how about you give some of the lower li’s a different class? That way you can change the “top” setting of their child uls (the subs) on :hover/focus. You can set negative top numbers on :hover. Start with -10px or -1em and gradually change them until you’re happy. I would possibly stick with px since if you use em’s, someone with enlarged text may get submenus much higher than you anticipated, and they won’t be able to move the mouse between the main level li and the sub and still keep :hover going.
