Is it possible to implement such a transition from one object to another using css?

Question

css

Hello,
Tell me, please, is it possible to implement such a transition from one menu item object to a submenu object so that the submenu does not disappear in the interval between them? It seems to me that this is implemented using javascript.
Here is an example, and what I was talking about is in the main menu at the top. and my code is below.
demo.themezilla.com/redux

<nav class="top-nav">
        <ul class="nav">
          <li>Home</li>
          <li>Features
            <ul class="drop-down-nav">
              <li><a href="">WP3.0+ Support</a></li>
              <li><a href="">8 Colors Schemes</a></li>
              <li><a href="">14 Custom Widgets</a></li>
              <li><a href="">Theme options panel</a></li>
              <li><a href="">* page templetes</a></li>
              <li><a href="">* Shortcodes</a></li>
              <li><a href="">localisation(.po/.mo)</a></li>
              <li><a href="">Theme documentation</a></li>
              <li><a href="">PSD Files included</a></li>
            </ul>
          </li>
          <li>Pricing</li>
          <li>Tour</li>
          <li>Shortcodes</li>
          <li>Portfolios
            <ul class="drop-down-nav">
              <li><a href="">One column</a></li>
              <li><a href="">Two column</a></li>
              <li><a href="">Three column</a></li>
            </ul>
          </li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </nav>

/* Navigation top */

.top-nav {
  margin-top: 38px;
  float: right;
  /*border:1px solid red;*/
  display: block;
  height: 38px;
}

.nav {
  margin: 0;
  padding: 0;
  -webkit-transform: translateY(50%);
  /*overflow: hidden;*/
}

.nav > li {
  -webkit-box-sizing: border-box;
  list-style: none;
  display: inline;
  color: #f5f3ed;
  font: 13px bold 'Ronnia';
  line-height: 13px;
  margin: 0 3px 0 3px;
  padding: 7px 14px;
  /*height: 38px;*/
  border-radius: 5px;
  position: relative;
  /*border: 1px dashed grey;*/
}

.nav li:hover {
  background-color: black;
}

ul li:hover ul {
  display: inline-block;
  opacity: 1;
  -webkit-transition: all 2s;
  background-color: green;
}

  /* sub-menu top */

  .drop-down-nav {
    position: absolute;
    overflow: hidden;
    display: none;
    top: 29px;
    left: 0;
    min-width: 10em;
    /*border:1px dotted green;*/
    padding: 10px 0 0 0;
    margin: 0;
    opacity: 0;
    -webkit-transition: all 2s;
  }

  .drop-down-nav li {
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
    list-style: none;
    width: 100%;
    background-color: black;
    font: 13px normal Helvetica, Arial, sans-serif;
    padding: 0 15px;
  }

  .drop-down-nav li:hover a {
    text-indent: 20px;

    -webkit-transition: all .3s;
  }

  .drop-down-nav li a {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid white;
    width: 100%;
    white-space: nowrap;
    text-transform: capitalize;
    padding: 0 0 0 0;
    -webkit-transition: all .3s;
    padding: 8px 0;
    color: white;
  }

  .drop-down-nav li:first-child {
    border-radius: 5px 5px 0 0; 
  }

  .drop-down-nav li:last-child {
    border-radius: 0 0 5px 5px; 
  }

  .drop-down-nav li:last-child a {
    border:none;
  }

Answer 1

The submenu is slightly larger than its visible part, so visually it seems that there is an empty space above it.