I am experiencing an issue with a dropdown menu. I have created this code (with the assistance of w3schools)... :)
The problem is that the sub-division that appears when I hover over a division does not match the width of the parent.
I attempted to assign it to "select_checkbox".
I can resolve the issue by setting the width of "multi_select" fixed in pixels and then setting the width of "select_checkbox" to 100%, but I prefer not to use a fixed width for "multi_select".
Is there a way to achieve this without using JavaScript?
Thank you
.multi_select {
display: inline-block;
width: auto;
}
.div_select {
font-size: 14px;
border: 1px solid black;
background-color: #EEE;
padding: 0px 5px 0px 3px;
cursor: pointer;
}
.div_select::after {
font-family: FontAwesome;
content: "\f0d7";
padding-left: 5px;
padding-right: 5px;
}
.multi_select_cat:hover .select_checkbox,
.multi_select_num:hover .select_checkbox{
display: block;
}
.select_checkbox {
position: absolute;
display: none;
background: #EEE;
border: 1px solid black;
border-top: 0px;
width: inherit;
}
.select_checkbox div {
display: block;
width: 100%;
}
.select_checkbox div:hover {
cursor: pointer;
background-color: #F60;
}
.select_checkbox_show {
display: block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="multi_select multi_select_num">
<div class="div_select noselect">
Number of elements to show
</div>
<div class="select_checkbox">
<div>10</div>
<div>20</div>
<div>30</div>
</div>
</div>
<div class="multi_select multi_select_cat">
<div class="div_select noselect">
Filter by category
</div>
<div class="select_checkbox">
<div><input type="checkbox"> Systems</div>
<div><input type="checkbox"> Tools</div>
<div><input type="checkbox"> Automotive</div>
</div>
</div>