父項與子菜單一起上落

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; 
}