Сделайте выпадающий список с непрозрачным фоном

---

Всем привет,

Я хочу сделать мега-меню, где при наведении фона будет непрозрачность.
У меня проблема:
Фон мерцает при наведении курсора, и непрозрачность применяется ко всему на странице, а не только к фону. Кто-нибудь знает, как это сделать?

HTML:

<nav class="navbar">
          <ul>
            <li>Menu
              <div class="mega-menu">
                <div class="inner-mega-menu">
                  <p>Item1</p>
                  <p>Item2</p>
                  <p>Item3</p>
                  <p>Item4</p>
                  <p>Item5</p>
                </div>
                <div class="inner-mega-menu">
                  <p>Item1</p>
                  <p>Item2</p>
                  <p>Item3</p>
                  <p>Item4</p>
                  <p>Item5</p>
                </div>
              </div>
            </li>
            <li>Menu</li>
          </ul>
          <script>
          $(document).ready(function(){
            $("ul").hover(function(){
                $(".backdrop").show();
                }, function(){
                $(".backdrop").hide();
            });
          });
        </script>
        </nav>

CSS:

.navbar {
  width: 100%;
  background-color: #257427;
  height: 48px;
  box-sizing: border-box;
}

.navbar ul {
  width: 1020px;
  height: 100%;
  margin: 0 auto;
  list-style: none;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
}

.navbar ul li {
  width: 120px;
  float: left;
  text-align: center;
  padding: 15px 0;
  color: #fff;
  cursor: pointer;
  transition: all 0.4s ease;
}

.mega-menu {
  position: absolute;
  top: 48px;
  left: 0;
  width: 1020px;
  height: 250px;
  background-color: #fff;
  transition: all 0.4s ease;
  padding: 40px;
  box-sizing: border-box;
  display: none;
  border-radius: 0 0 20px 20px;
}

.inner-mega-menu {
  width: 24%;
  float: left;
  margin-right: 1%;
}
 .backdrop {
  background-color:rgba(0,0,0,0.5);
   opacity: 0.5;
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index:100;
   display: none;
}

Спасибо,
Сэм

Что я уже пробовал:

Я попытался поискать в интернете и выше.

---