CSS 中的菜单使用<ol>

Question

当我悬停媒体，电子竞技，社区时，我想在它们下看到<li>。我使用RGB不透明度来获得它。但可惜当我将<li>元素悬停在不透明的情况下时，出现了。我只想在悬停li a时这样做。有人知道答案吗？

这是我的代码（列表菜单）

.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><a href="#">Media</a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Facebook</a></li>
      </ul>
    </li>
    <li><a href="#">E-sport</a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Facebook</a></li>
      </ul>
    </li>
    <li><a href="#">Community</a>
      <ul>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Facebook</a></li>
      </ul>
    </li>
  </ol>
</div>

Answer 1

说实话，我找到了整个。使用纯div和类时，也会使用显示：无，因此，除非将其设置为某物，否则它实际上将其带走，这是代码：

编辑：使用不透明度：0和溢出：隐藏，它可与tranStition一起使用

edit2：实际上简单的高度：0 溢出隐藏将为您提供良好的transtition进出，它必须在悬停的高度上具有固定的高度。

<div class="Menu">
<div class="Menu-item-container">
    <a href="#">Media</a>
    <div class="hover-items">
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Facebook</a></div>
    </div>
</div>
<div class="Menu-item-container">
    <a href="#">E-sport</a>
    <div class="hover-items">
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Facebook</a></div>
    </div>
</div>
<div class="Menu-item-container">
    <a href="#">Community</a>
    <div class="hover-items">
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Facebook</a></div>
      <div><a href="#">Facebook</a></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

伙计，对不起，但是您的代码很疯狂。为什么结合OL和UL。在这里，我给你免费的我：

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><a href="#">MEDIA</a>
        <ul class="sub-menu">
            <li><a href="#">FACEBOOK</a>
                <ul class="micro">
                    <li><a href="#">TWITTER</a></li>
                    <li><a href="#">TWITTER</a></li>
                    <li><a href="#">TWITTER</a></li>
                </ul>
            </li>
            <li><a href="#">FACEBOOK</a></li>
            <li><a href="#">FACEBOOK</a></li>
        </ul>
    </li>
    
    <li><a href="#">E-SPORT</a>
        <ul class="sub-menu">
            <li><a href="#">FACEBOOK</a></li>
            <li><a href="#">FACEBOOK</a></li>
            <li><a href="#">FACEBOOK</a></li>
        </ul>
    </li>
    
    <li><a href="#">COMMUNITY</a>
        <ul class="sub-menu">
            <li><a href="#">FACEBOOK</a></li>
            <li><a href="#">FACEBOOK</a></li>
            <li><a href="#">FACEBOOK</a></li>
        </ul>
    </li>
    
</ul>
</div>