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

来源：互联网发布：越狱怎么清除所有数据编辑：程序博客网时间：2024/05/17 21:57

这里写图片描述

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

阅读全文

0 0