父项目下拉子菜单

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