I have this HTML:
.orderData_button {
background-color: #FF5733;
border: none;
color: white;
padding: 5px 60px;
text-align: center;
display: inline-block;
font-size: 16px;
transition: width 1s ease-in-out
}
.slideDown_orderData {
display: none;
position: relative;
z-index: 3;
transition: width 1s ease-in-out
}
.orderData_button:hover .slideDown_orderData {
display: block;
width: 100%;
}
.orderData_button:hover {
width: 50%;
}
#orderData_2 {
font-size: 20px;
text-align: center;
}
<div class="orderData_button">
<p>Your Orders</p>
<p></p>
<div class="slideDown_orderData">
<p id="orderData_2"></p>
</div>
</div>
My orderData_button
and slideDown_orderData
will not transition width, but will change instantly. Why is this? (Yes I have look all over google, with no success)
-CSS noob