Переопределение родительских css настроек с использованием child дает неизвестное имя свойства

Question

Я пытаюсь переопределить родительские настройки раскрывающегося меню, используя дочерний класс в CSS. К сожалению, когда я пытаюсь сделать это, я получаю ошибку «неизвестное имя свойства» в дочернем классе, хотя я использую точно такое же свойство в родительском классе.

Код CSS выглядит следующим образом:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  overflow: hidden;
  min-width: 160;
  min-heigth: 100;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  left:20%;
}

.test {
    min-width: 1080;
    min-heigth: 480;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

А код HTML (django формат шаблона) выглядит следующим образом:

{% for info in infos %}
    <div class="dropdown">
        <a href="#">dropdown item</a>
        <div class="dropdown-content">
            {% if info.2 == "img" %}
                <!-- display image -->
            {% elif info.2 == "gif" %}
                <div class="test">Gifs and Videos are disabled for preview.</div>
            {% endif %}
        </div>
    </div>
{% endfor %}

В котором info.2 всегда будет содержать строку "gif" или "img". Я еще не реализовал изображение.

Однако, если я использую элемент inspect, я получаю следующую ошибку:

Какой не имеет никакого смысла для меня, так как css в классе dropdown-content работает правильно. Что здесь не так?

Answer 1

Поскольку 1080 могут быть 1080 картофелин или слонов, вам нужно указать px или любую другую единицу, которую вы предпочитаете