纯CSS实现3级导航菜单效果。

<div class="main">
                <ul id="subMenu">
                    <li class="item01">
                        <span class="arrow-right"></span>
                        <a href="#">导航1</a>
                        <ul class="item02">
                            <li>
                                <span class="arrow-right"></span>
                                <a href="#">李四导航2</a>
                                <ul>
                                    <li><a href="#">李四导航3</a></li>
                                    <li><a href="#">李四导航3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="item01">
                        <span class="arrow-right"></span>
                        <a href="#">导航1</a>
                        <ul class="item02">
                            <li>
                                <span class="arrow-right"></span>
                                <a href="#">李四导航2</a>
                                <ul>
                                    <li><a href="#">李四导航3</a></li>
                                    <li><a href="#">李四导航3</a></li>
                                </ul>
                            </li>
                            <li>
                                <span class="arrow-right"></span>
                                <a href="#">李四导航3</a>
                                <ul>
                                    <li><a href="#">李四导航3</a></li>
                                    <li><a href="#">李四导航3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">李四导航3</a></li>
                            <li><a href="#">李四导航3</a></li>
                        </ul>
                    </li>
                    <li class="item01">
                        <span class="arrow-right"></span>
                        <a href="#">导航1</a>
                        <ul class="item02">
                            <li>
                                <span class="arrow-right"></span>
                                <a href="#">李四导航2</a>
                                <ul>
                                    <li><a href="#">李四导航3</a></li>
                                    <li><a href="#">李四导航3</a></li>
                                </ul>
                            </li>
                            <li><a href="#">李四导航3</a></li>
                            <li><a href="#">李四导航3</a></li>
                            <li><a href="#">李四导航3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

CSS代码 (ps:用sass编译过来的，要设置初始化样式。)

.main .right #subMenu {
  position: relative;
  background: #0099CC;
  width: 326px; }
  .main .right #subMenu .arrow-right {
    position: absolute;
    right: 5px;
    top: 15px;
    display: block;
    height: 0;
    border: 10px solid #333;
    border-right: 10px solid transparent;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent; }
  .main .right #subMenu .item01 {
    position: relative;
    height: 40px; }
    .main .right #subMenu .item01:hover {
      background: #324085; }
      .main .right #subMenu .item01:hover > ul {
        display: block; }
    .main .right #subMenu .item01 > a {
      position: relative;
      display: block;
      height: 40px;
      padding: 0 25px;
      line-height: 40px;
      color: #FFFF00; }
    .main .right #subMenu .item01 > ul {
      position: relative;
      width: 326px;
      top: -40px;
      left: 326px; }
    .main .right #subMenu .item01 .item02 {
      display: none;
      background: url(../../img/dblue_bg.png); }
      .main .right #subMenu .item01 .item02 > li {
        position: relative;
        height: 40px; }
      .main .right #subMenu .item01 .item02 > li:hover {
        background: #F2F2F2; }
        .main .right #subMenu .item01 .item02 > li:hover ul {
          display: block; }
        .main .right #subMenu .item01 .item02 > li:hover a {
          color: #333; }
      .main .right #subMenu .item01 .item02 a {
        position: relative;
        display: block;
        height: 40px;
        padding: 0 25px;
        line-height: 40px;
        color: #fff; }
      .main .right #subMenu .item01 .item02 ul {
        display: none;
        position: relative;
        width: 326px;
        top: -40px;
        left: 326px;
        background: #F2F2F2; }
        .main .right #subMenu .item01 .item02 ul a {
          color: #333; }