IE11 inline menu the style not working - html

Question

I have menu that open inline block links
this menu work fine in all browser except IE11
in chrome appear like this
in IE11 appear link this
this snippet
.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;
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>
how I can fix it in IE11?
I tried to make clearfix & make right:-100% , but still there is problem.
any help ............................................................

Answer 1

First, there is issue in your HTML with double quote here
<a title="Current Issue"">
Second, it looks like when you display flex in a row in IE it does not compute new width and instead keeps the same width from when flex box was a column. I am not exactly sure what you want to accomplish but if you are trying to make submenues red you can apply red color and shadow directly to your list items like so:
.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>