Menu in CSS using <ol> - html

Question

When I hover a Media, E-sport, Community I want to see <li> under them. I get it with the rgb opacity. But it's a pity that when I hover AN <li> element which is opacity 0 it appears. I only want to do it when I hover ol li a. Someone know's the answer?
Here's my code (Menu with lists)
.Menu ol {
display: inline-block;
padding: 0;
margin: 0;
line-height: 1;
}
.Menu ol>li>ul>li>a {
margin-left: 0;
padding: 0;
}
.Menu ol>li {
float: left;
padding: 0;
list-style-type: none;
}
.Menu ol>li>ul>li>a {
color: rgba(55, 255, 255, 0);
transition: .5s ease-in-out;
}
.Menu ol>li:hover>ul>li>a {
color: rgba(55, 255, 255, 1);
transition: .5s ease-in-out;
background-color: rgb(0, 0, 205, 1);
}
.Menu ol>li>ul>li {
clear: both;
margin-left: 90px;
}
.Menu ol>li>ul>li {
clear: both;
margin: 0;
list-style-type: none;
padding: 0;
}
.Menu ol>li>ul>li>a {
padding-left: 0;
margin: 0;
}
Article {
width: 1920px;
height: 957px;
}
<div class="Menu">
<ol>
<li>Media
<ul>
<li>Facebook</li>
<li>Facebook</li>
<li>Facebook</li>
</ul>
</li>
<li>E-sport
<ul>
<li>Facebook</li>
<li>Facebook</li>
<li>Facebook</li>
</ul>
</li>
<li>Community
<ul>
<li>Facebook</li>
<li>Facebook</li>
<li>Facebook</li>
</ul>
</li>
</ol>
</div>

Answer 1

To be honest I find the whole ".Menu ol>li:hover>ul>li>a.. " and so on pure madness, its messy and unclear, much better effects you will get when using pure divs and classes, also use display: none, so it actually takes away the elements unless you set it to something, here is the code:
Edited: Use opacity: 0 and overflow: hidden, it works with transtition
Edit2: Actually simple height: 0 + overflow hidden will give you nice transtition in AND out, it got to have fixed height on hover thou.
<div class="Menu">
<div class="Menu-item-container">
Media
<div class="hover-items">
<div>Facebook</div>
<div>Facebook</div>
<div>Facebook</div>
</div>
</div>
<div class="Menu-item-container">
E-sport
<div class="hover-items">
<div>Facebook</div>
<div>Facebook</div>
<div>Facebook</div>
</div>
</div>
<div class="Menu-item-container">
Community
<div class="hover-items">
<div>Facebook</div>
<div>Facebook</div>
<div>Facebook</div>
</div>
</div>
</div>
<style>
.Menu {
display: flex;
justify-content: space-around;
width: 300px;
}
a {
text-decoration: none;
}
.hover-items {
transition: .5s ease-in-out;
height: 0;
overflow: hidden;
}
.Menu-item-container {
width: 100px;
text-align: center;
}
.Menu-item-container:hover .hover-items{
height: 100px;
}
</style>
Codepen: https://codepen.io/Raitar/pen/QOZgoV?editors=1100

Answer 2

Dude i'm sorry but your code is madness. why combine ol and ul.
here i give you free mine :
body{
width:100%;
height:100%;
margin:0;
}
ul{
list-style:none;
padding:0;
}
a{
text-decoration:none;
}
.menu {
width:100%;
height: 33px;
background: #000;
position:relative;
}
.menu ul:not(.sub-menu):not(.micro){
margin:auto;
display:flex;
}
.menu ul li{
position:relative;
flex:1;
}
.menu a{
text-align:center;
display:block;
line-height: 33px;
margin-right: 40px;
color:#fff;
padding: 0 15px;
}
.sub-menu{
width:100%;
display:none;
position: absolute;
transform:translateY(0);
background: #ccc;
transition: all 300ms;
z-index:2;
}
.sub-menu a{
margin:10px 0;
}
.micro{
top:-10px;
width:100%;
opacity:0;
transform: translate(100%, 0);
position: absolute;
background: orangered;
z-index:1;
transition: all 300ms;
}
.micro a{
color:#fff;
}
.menu ul li a:hover + ul.sub-menu {
display:block;
}
.sub-menu:hover{
transform:translateY(5%);
display:block;
}
.sub-menu a:hover + ul.micro {
opacity:1;
}
.micro:hover{
opacity:1;
}
<div class="menu">
<ul>
<li>MEDIA
<ul class="sub-menu">
<li>FACEBOOK
<ul class="micro">
<li>TWITTER</li>
<li>TWITTER</li>
<li>TWITTER</li>
</ul>
</li>
<li>FACEBOOK</li>
<li>FACEBOOK</li>
</ul>
</li>
<li>E-SPORT
<ul class="sub-menu">
<li>FACEBOOK</li>
<li>FACEBOOK</li>
<li>FACEBOOK</li>
</ul>
</li>
<li>COMMUNITY
<ul class="sub-menu">
<li>FACEBOOK</li>
<li>FACEBOOK</li>
<li>FACEBOOK</li>
</ul>
</li>
</ul>
</div>