Jump to content

How to darken background on dropdown hover

Recommended Posts

  • Replies 7
  • Views 1k
  • Created
  • Last Reply
  • 2 weeks later...
On 1/6/2021 at 2:03 PM, TheSignBridge said:

Site URL: https://saladcreative.com/

I would like to try and replicate the effect on the above website. When you hover over the dropdown on the top menu it darkens the rest of the page. I would like to do this so I don't have to place an ugly box around my drop down items for them to be visible. 

Can anyone help please, thanks in advance.

@TheSignBridge I have been able to achieve this effect using this code. Hope it works for you.

.classname > div {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
.classname::after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
    z-index: 0;
Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.