html / css - тень главного меню не l ie на изображении героя

Question

Как я прокомментировал в css, у меня проблема с тенью .header-menu, которая не l ie на .hero-image. Я установил z-index из .header-menu в 1001 и z-index из .hero-image в 1000, но безрезультатно. Я мог бы установить z-index из .hero-image в -1, чтобы исправить это, но тогда проблема в том, что секция поиска недоступна для выбора.

Как я могу l ie тень меню на изображении?

.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>

Обновление

Что это такое:

Что я хочу:

Конечно, я поменял его на красный, чтобы его было ясно видно.

Answer 1

Вот код. Надеюсь, это поможет вам. Если какие-либо изменения, пожалуйста, дайте мне знать.

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>