css - 仅使用 CSS 的 3 层导航

Question

我想创建一个 3 级导航栏，就像http://www.bestbuy.com/上的导航栏一样。 但是，我想知道是否有一种方法可以只使用 CSS 来做到这一点。我已经尝试了一个类似于http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/上的导航栏。但是，问题在于第三级导航不像百思买那样浮动到顶部。有人可以告诉我如何只使用 CSS 来做到这一点。提前致谢！

Answer 1

这很简单。具有类似的结构

<nav>
  <ul>
    <li>
      <a href='#'>level 0</a>
      <ul>
        <li>
          <a href='#'>level 1</a>
          <ul>
            <li>level 2</li>
<!-- and so on... -->

你只需要这个 CSS 让它工作

nav ul { padding: 0; list-style: none; }
nav>ul>li { float: left; position: relative; }
nav ul ul {
  display: none;
  position: absolute;
  top: 100%; left: 0;
}
nav ul ul ul { top: 0; left: 100%; }
nav li:hover>ul { display: block; }

演示