First and foremost, there seems to be an issue in your HTML code with a double quote present here
<a title="Current Issue"">
Additionally, it appears that when you set the display property to flex in a row in Internet Explorer, it does not correctly calculate the new width and maintains the previous width from when the flex box was a column. If you are looking to style submenu items in red, you can directly apply red color and shadow to your list items as shown below:
.rlist--inline {
list-style: none;
padding: 0;
margin: 0;
}
.rlist--inline li {
display: inline-block;
padding: 10px;
border: 1px solid black;
}
.dropdown__menu li {
padding: 5px;
}
.dropdown__menu a {
white-space: nowrap;
padding: 12px 20px 8px;
}
* {
box-sizing: border-box;
}
.dropdown:hover>.dropdown__menu {
display: flex;
/* background: #ed1c24; */
left: -100%;
}
.dropdown {
display: inline-block;
position: relative;
background: red;
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
}
ul.rlist > li {
background: #ed1c24;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
<ul class="rlist--inline">
<li class="menu-item"><a><span>Topics</span></a></li>
<li class="dropdown menu-parent">
<a title="Journal" class="dropdown__toggle">
<span>Journal</span>
</a>
<ul class="rlist dropdown__menu">
<li>
<a title="Current Issue">
<span>Current Issue</span>
</a>
</li>
<li>
<a>
<span>Archive</span>
</a>
</li>
<li>
<a>
<span>Article Series</span>
</a>
</li>
</ul>
</li>
</ul>