Shadow effect behind drop down menu

Site URL: https://tulip-tiger-l3hf.squarespace.com/

Hi! I am trying to create this cool shadow effect that appears behind the nav drop down menu. Currently, it looks like the first picture, but I would like it to look that second picture. Any tricks?

Hi. What is site access password?

@tuanphan oh shoot, I'm sorry, this must be the most annoying part of your job. My password is: 

brineintopedro

This will add a drop shadow, gray, but you can change the color to any HEX and RGBA color  using this tool: https://www.hexcolortool.com/ to most 7.0 templates including Avenue. 

#topNav nav .folder-collection .subnav {
    background: #fff !important;box-shadow: 5px 5px 15px rgba(0,0,0,0.25)
}

Thank you @derricksrandomviews Thank you for the code- however, I just put it in my CSS and changed the  rgba to black- but nothing showed. Any tips?

The best thing to do is change the site availability to password protected, set a password, post it here and then we can take a look which will help customize the code for your site. The same code will not work for all sites in 7.0, but 7.1 being that is only one family is a bit easier to write the code for. So a lot depends on what template you are using. 

@derricksrandomviews thank you, I understand! I am using 7.1 

Site URL: https://tulip-tiger-l3hf.squarespace.com/

password: brineintopedro

This guide is for changing drop down menus in 7.1:

For your needs I think you can get away with the following, based off of derricksrandomviews code. The video is grand for showing more extensive modifications to the folder.

.header-nav-folder-content {

  box-shadow : 5px 5px 15px black;
  
  }

Let us know how it goes.

WOW @creedon thank you- that worked perfectly!! 😭💞

Yes, indeed the drop downs look much better.