demo

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

仅使用CSS的3层导航

1 个答案:

demo