纯CSS子菜单导致li堆叠在一起

Question

我正在为我的网站修改一个Koken主题，需要导航有一个子菜单。我已经让它与CSS一起工作，除了当子菜单出现时，它会向下推送其余的内容。我在子菜单li's中添加了绝对定位，以防止这种情况的发生，这使得它可以按照预期的方式工作，只是现在li的位置堆叠在一起了。我知道Koken相对较新，但如果有人有任何建议或想法，我将不胜感激……

url为http://gatesman.com/portfolio/albums/landscapes/

这是HTML

<nav>
<ul class="k-nav-list k-nav-root "><li><a target="" title="Reel" href="http://gatesman.com">Reel</a></li>
<li><a class="k-nav-set" data-koken-internal title="Portfolio" href="/portfolio/sets/portfolio/">Portfolio</a>
<ul class="k-nav-list "><li><a data-koken-internal title="Cars" href="/portfolio/albums/cars/">Cars</a></li>
<li><a data-koken-internal title="Lifestyle" href="/portfolio/albums/lifestyle/">Lifestyle</a></li>
<li><a class="k-nav-current" data-koken-internal title="Landscapes" href="/portfolio/albums/landscapes/">Landscapes</a></li>
</ul></li><li><a target="" title="About" href="http://gatesman.com/about/">About</a></li>
<li><a target="" title="Blog" href="http://gatesman.com/gatesman-blog/">Blog</a></li>
<li><a target="" title="Contact" href="http://gatesman.com/contact/">Contact</a></li></ul>  </nav>

和相应的CSS

nav li
{
  display: inline-block;
  white-space: nowrap;
  padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 9px;
  line-height: 2;
}

nav ul li
{
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  margin-right: 10px;
}

nav ul li ul li {
display: none;
}

nav ul li:hover > ul li {
    position: absolute;
    display: block;

}



nav ul li ul li {
    text-align: left;
}

Answer 1

隐藏和绝对定位应该在子ul%s上，而不是li%s上。

nav ul ul { display: none; position: absolute; /* ...etc... */ }

Fiddle。

其他更改：

nav li { display: inline-block; /* ... */ }

变成了

nav > ul > li { display: inline-block; /* ... */ }

和

nav ul li:hover > ul li { position: absolute; display: block; }

变成了

nav ul li:hover > ul { display: block; }