Dim rest screen on hover of menu

Question

Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of screen is not getting dim which i actually want and instead only my menu is getting dim. Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site? Thanks, http://jsfiddle.net/49Qvm/9/ ```

Home
About
Contact
Num

$('li').hover(function(){ $(this).addClass('hovered'); },function(){ $(this).removeClass('hovered'); }); ```

Accepted Answer

I think your best bet would be to create an element for the darken effect on the screen. When you hover over the `ul` element it will toggle the visibility of the darkening element.

You will need to be sure that the `z-index` value for the `ul` element is higher than the element that provides the darkening effect (Remember this! When setting `z-index` on an element you will need to be sure to set it's `position` CSS property to `relative`, `fixed`, or `absolute`).

Here's a fiddle: http://jsfiddle.net/49Qvm/28/

Dim rest screen on hover of menu

Solution

Problem