父项与子菜单一起上落

Question

你好是否有可能当我将鼠标悬停在父项上时，父项也会向上滑动，使得父项上方的下拉菜单在上面？这里是我的代码，但我似乎无法使它工作。这里是一个可视化菜单，我想http://imgur.com/om9mvdG（第二图像）

 .nav ul { 
 

 
      *zoom: 1; 
 

 
      list-style: none; 
 

 
      margin: 0; 
 

 
      padding: 0; 
 

 
      background: #333; 
 

 
     } 
 

 
     .nav ul:before, 
 

 
     .nav ul:after { 
 

 
      content: ""; 
 

 
      display: table; 
 

 
     } 
 

 
     .nav ul:after { 
 

 
      clear: both; 
 

 
     } 
 

 
     .nav ul > li { 
 

 
      float: left; 
 

 
      position: relative; 
 

 
     } 
 

 
     .nav a { 
 

 
      display: block; 
 

 
      padding: 10px 20px; 
 

 
      line-height: 1.2em; 
 

 
      color: #fff; 
 

 
      border-left: 1px solid #595959; 
 

 
     } 
 

 
     .nav a:hover { 
 

 
      text-decoration: none; 
 

 
      background: #595959; 
 

 
     } 
 

 
     .nav li ul { 
 

 
      background: #273754; 
 

 
      position: absolute; 
 

 
      left: 0; 
 

 
      bottom: 36px; 
 

 
      z-index: 1; 
 

 
     } 
 

 
     .nav li ul li { 
 

 
      width: 100%; 
 

 
      overflow: hidden; 
 

 
      height: 0; 
 

 
      -webkit-transition: height 200ms ease-in; 
 

 
      -moz-transition: height 200ms ease-in; 
 

 
      -o-transition: height 200ms ease-in; 
 

 
      transition: height 200ms ease-in; 
 

 
     } 
 

 
     .nav li ul a { 
 

 
      border: none; 
 

 
     } 
 

 
     .nav li ul a:hover { 
 

 
      background: rgba(0, 0, 0, 0.2); 
 

 
     } 
 

 
     .nav ul > li:hover ul li { 
 

 
      height: 36px; 
 

 
     }

<ul> 
 
    <li> 
 
    <a href="#">Nav Item</a> 
 
    <ul> 
 
     <li><a href="#">Subnav</a> 
 
     </li> 
 
     <li><a href="#">Subnav</a> 
 
     </li> 
 
     <li><a href="#">Subnav</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">Nav Item</a> 
 
    <ul> 
 
     <li><a href="#">Subnav</a> 
 
     </li> 
 
     <li><a href="#">Subnav</a> 
 
     </li> 
 
     <li><a href="#">Subnav</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
</nav>

Answer 1

这个CSS添加到您现有的代码。这是你想要的吗？

http://codepen.io/anon/pen/jbBgdg

li>ul { 
    display: none; 
} 
a:hover~ul { 
    display: block; 
}