背景图片不显示内部div

Question

I have a navigation window that has a logo and then different navigation links. I want to have a border in the bottom of the the navigation and I used a background image for this. I do not want it throughout the whole navigation only outside the inner divs.

The first image below it how it currently appears

and the second is the desired outcome

The main problem is that some of the bottom borders for the inner divs are gradient with transparent but the bottom border of the parent takes over it and removes the transparent.

Is there any approach where the background does not appear for the inner divs? or have a bottom border for the parent div only show outside the inner divs?

My apologis, here is my current set up

.parentNav {
  background-image: url(blue_line_bottom);
  background-repeat: no-repeat;
  background-size: 100% 7%;
  background-position-y: 82px;
}
.logoImage {
  width: 100%;
  height: 89px;
  right: 0;
  position: relative;
  background-image: url(http://sitelogo_with_transparency);
  background-repeat: no-repeat;
  background-position: -17px 1px;
}
.navLanding {
  padding-top: 4px;
}
.item {
  display: inline-block;
  width: 25%;
  text-align: center;
  border-bottom: 3px solid #006B93;
}

<div class="parentNav">
  <div class="siteLogo">
    <div class="logoImage">
      <a href="/" src="http://sitelogo_with_transparency"></a>
    </div>
  </div>
  <div class="navLanding">
    <div class="item">
      <a href="">First Page</a>
    </div>
    <div class="item">
      <a href="/second">Second Page</a>
    </div>
    <div class="item">
      <a href="/third">Third Page</a>
    </div>
    <div class="item">
      <a href="/fourth">Fourth Page</a>
    </div>
    <div class="item">
      <a href="/fifth">Fifth Page</a>
    </div>
  </div>
</div>