html/css - Top menu shadow doesn't lie on hero image

Question

As I commented in css I have problem with the shadow of .header-menu that doesn't lie on the .hero-image. I set z-index of .header-menu to 1001 and z-index of .hero-image to 1000 but no result. I could set the z-index of .hero-image to -1 to fix it but then the problem is that search section is not selectable.

How can I lie the shadow of menu on the image?

.hero-image {
            background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://dummyimage.com/600x400/ff00ff/fff.png');
            height: 540px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .hero-text {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }
        .header-top {
            background-color: #494787;
        }
        .header-menu {
            height: 82px;
            background-color: #fff;
            box-shadow: 0px 20px 20px 0px #00000070; // I have problem here
        }

<div class="header-menu">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="header-menu">
                        <div class="logo">
                            <a href="#">
                                <img src="#" />
                            </a>
                        </div>
                        <nav class="main-nav">
                            <ul class="main-sections">
                                <li>
                                    <a href="#">Link To</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="hero-image">
        <div class="hero-text">
            <div class="header-search">
                <form class="header-search-box">
                    <div class="input-group">
                        <select class="form-control select2">
                            <option></option>
                        </select>
                        <div class="input-group-prepend">
                            <button class="btn btn-primary fa fa-search" type="submit">Go</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

Update

What it is:

What I want:

Of course I changed it to red in order to be shown clearly.

Answer 1

Here is the code. Hope it will help you. If any changes please let me know.

body {
  position: relative;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://dummyimage.com/600x400/ff00ff/fff.png');
  height: 540px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 82px;
  width: 100%;

}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.header-top {
  background-color: #494787;
}

.header-menu {
  height: 82px;
  background-color: #fff;
  box-shadow: 0px 20px 20px 0px #00000070; 
  position: absolute;
  width:100%;
  z-index:99;
}

<div class="header-menu">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="header-menu">
          <div class="logo">
            <a href="#">
              <img src="#" />
            </a>
          </div>
          <nav class="main-nav">
            <ul class="main-sections">
              <li>
                <a href="#">Link To</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="hero-image">
  <div class="hero-text">
    <div class="header-search">
      <form class="header-search-box">
        <div class="input-group">
          <select class="form-control select2">
            <option></option>
          </select>
          <div class="input-group-prepend">
            <button class="btn btn-primary fa fa-search" type="submit">Go</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>