Question

我正在为我的网站修改Koken主题，并需要导航才能有子菜单。我已经得到它与CSS一起工作，除了当子菜单出现时，它会推动其余的内容。我在子菜单中添加了绝对定位以防止这种情况发生，这使得它按照预期的方式工作，除了现在li的堆叠在彼此之上。我知道Koken相对较新，但如果有人有任何建议或想法，我会很感激......

网址为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上，而不是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; }

纯CSS子菜单导致li堆叠在彼此之上

1 个答案: