Фоновое изображение на ul повторов расширяется до дочерних элементов

Question

У меня есть меню с фоновым изображением на уровне ul, которое охватывает все пункты меню главное меню Как предотвратить раскрытие изображения при открытии дочернего элемента? дочернее меню Я попытался установить background: none для дочернего элемента, но это не помогает

<div class="well _menu">
    <ul class="nav menu navbar-nav nav-pills mod-list nav-hover">
        <li><a href="#">HOME</a></li>
        <li><a href="#">AGENDA</a></li>
        <li class="dropdown"><a href="#">INSCHRIJVEN</a>
            <ul class="nav-child unstyled small dropdown-menu">
                <li><a href="#">INSCHRIJVEN</a></li>
                <li><a href="#">TARIEVEN</a></li>
            </ul>
        </li>
        <li><a href="#">OVER WWJ</a></li>
    </ul>
</div>

.well {
  width: 100%;
  height: auto;
  color: #fff;
}
.well ul {
  background:url(../images/menubalk.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  height: 100%;
}
.well ul li{
  list-style: none;
  height: 100%;
  float: left;
  text-align: center;
}
.well .nav-child{
  width:180px ;
  text-decoration: none;
}
.well .dropdown-menu{
  position:relative;
}
.well .dropdown-menu ul {
  background:none ;
}
.well .nav-child ul li{
  float: none;
  width: 100%
}
.well .nav-child li{
  display: contents;
}    

Answer 1

Установив для фона явно только прямые дочерние элементы из .well, вы можете избежать текущего поведения:

Вы делаете это, добавляя > (дочерний комбинатор) между ними.

.well > ul {
  background:url(../images/menubalk.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  height: 100%;
}

Дочерний комбинатор (>) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которые соответствуют второму селектору, которые являются прямыми дочерними элементами элементов, соответствующих первому.

Подробнее о дочернем комбинаторе в MDN .

Вторая проблема, вертикальное расширение фона меню, может быть решена с помощью этих селекторов.

1. Удалить overflow: hidden; из .well > ul
2. Отрегулируйте CSS для раскрывающийся класс элемента:

.well .dropdown-menu {
    position: absolute;
    top: 100%;
}

Он разместит подменю без учета родителя. Поэтому overflow: hidden нужно удалить, иначе его не будет видно.

Результат скорректированных изменений