0

I have made a menu that 'popups' on hover when javascript is disabled. However this is working ok, the menu shows a scrollbar when the menu is to large to fit into the viewport (window).

When it popups on hover there are two scrollbars, one of the window and one of the menu. Looks very ugly and can confuse the user.

With javascript enabled I apply a .noscroll class to the body so there only one scrollbar.

.noscroll { overflow:hidden !important; }

Tried to do this with CSS only but can't get it to work, tried several things like:

.nav .panel:hover > body,
.nav .panel:hover > html {  overflow:hidden !important; } 
.nav .panel:hover #body { overflow:hidden !important; } /* body with id body */

The menu itself is fixed positioned. The reason I do it this way is to be sure the menu covers the whole window because height:100% doesn't want to cover the whole document and it's very ugly. Also, the search bar will be always visible.

How can achieve the effect I want?

Image (click on right mousebutton to view larger image): menuexamples

Codebeat
  • 6,123
  • 5
  • 51
  • 88

1 Answers1

0

This can't be done with current CSS rules. You can only apply rules to children of the specified element, not parents. See https://stackoverflow.com/a/1014958/1034613 for specifics. For now, you will have to stick to Javascript for that.

Community
  • 1
  • 1
Quentin Skousen
  • 1,006
  • 1
  • 19
  • 30