css - CSSのみを使用した3層ナビゲーション

Question

http://www.bestbuy.com/にあるような 3 レベルのナビゲーション バーを作成したいのです が、CSS だけでこれを行う方法がないか知りたいと思っていました。http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/にあるようなナビゲーション バーを既に試しました。ただし、問題は、ナビゲーションの第 3 レベルがベストバイのように一番上に浮かんでいないことです。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; }

デモ