<ul class="menu">
  <li><a   href="#" >position</a>

    <ul>
      <li><a   href="#">top</a></li>
      <li><a   href="#">left</a></li>
      <li><a   href="#">down</a></li>
      <li><a   href="#">right</a></li>
    </ul>
  
  </li>
  <li><a  href="#" >Object</a>
    <ul>
   
      
      
      
      
      
      <li class='test'><a  href="#">Car</a>
      
        
        <ul>
          <li><a   href="#">red</a></li>
          <li><a   href="#">blue</a></li>
          <li><a   href="#">black</a></li>
          <li><a   href="#">yellow</a></li>
        </ul>
      
      </li>
      <li><a   href="#">Windows</a>
      
      
        <ul>
          <li><a   href="#">red</a></li>
          <li><a   href="#">blue</a></li>
          <li><a   href="#">black</a></li>
          <li><a   href="#">yellow</a></li>
        </ul>
        
      
      </li>

    </ul>
  </li>

</ul>

 
.menu{
 
padding: 0px;
display: block; 
 
}
 
.menu > li{
margin: 0px;
position:static;
}
 
.menu a{
display: block;
transition: 1s; 
 color:blue;
}
 
 
 
.menu li{
padding: 3px ;  
 
 
  background:#ff000059;
}
 
 
.menu  ul   {
margin: 0px;
padding: 0px;
 
transition: 1s; 
} 
 
.menu li:hover {
    
transition: 1s; 
 
}
.menu > li:hover {
 
transition:1s; 
}
 
.menu  li:hover   ul   {
transition:1s; 
 
} 
 

.menu .test{
  padding:10px;
  font-size:30px;
}




ul:not(.menu) {
  overflow: hidden;
  max-height: 0;
  transition: 0.5s ease-out;
}

li:hover>ul {
  max-height:100vh;
  transition: 0.5s ease-in;
}