Is it possible to adjust the settings of a dropdown menu's parent using a child class in CSS? When attempting this, an "unknown property name" error is encountered on the child class, even though the same property is used within the parent class.
The CSS code snippet in question:
.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;
}
The HTML code (in django template format) associated with the above CSS:
{% 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 %}
The info.2 variable will hold either "gif" or "img". The image implementation is pending.
However, upon inspecting element, an error as shown in the following link is displayed:https://i.sstatic.net/B0m7u.png
This error seems confusing since the CSS within the dropdown-content class functions correctly. What could be causing this issue?