Html 在css菜单栏中，列表项在移动到它时消失？

我正在css菜单栏上工作。一切正常，但当我们离开父菜单时，该父菜单的列表项就会消失。所以请给我准确的代码来纠正这个问题

代码：

---

你也可以发布你的html和其他相关的css吗？你的html和其他css在哪里？你可以制作一个JSFIDLE吗？HTML也很有用。

 .menu li {
    float: left;
    position: relative;
 }

 .menu li a {
   display: block;
   vertical-align: middle;
   text-decoration: none;
   height: 34px;
  }

  .menu ul {
     position: absolute;
     left: -9999px;
     list-style: none;
     opacity: 0;
     transition: opacity 1s ease;
 }
  .menu ul li {
     float: none;
     z-index: 100;
     background-color:#FF7F50;
}
  .menu ul a {
     white-space: nowrap;
}

  .menu li:hover ul {
     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
     left: 5px;
     opacity: 1;
     z-index: 100;
  }

   .menu li:hover ul a {
      box-shadow: none;
      z-index: 100;
 }

 .menu li:hover ul li a:hover {
   box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
   z-index: 100;
 }