CSS滑鼠懸浮無限產生下級頁面

這次給大家帶來CSS滑鼠懸浮無限產生下級頁面，CSS滑鼠懸浮無限產生下級頁面的注意事項有哪些，下面就是實戰案例，一起來看一下。

廢話不多說了，直接大家貼代碼了，具體代碼如下所示；

*{                margin: 0;                padding: 0;            }            ul,li{                list-style: none;            }            .ui-slide-box{                width: 300px;            }            .ui-slide-item{                width: 100%;                position: relative;            }            .ui-slide-item-text{                display: block;                background-color: #000000;                color: white;                border-bottom: 1px solid yellow;                height: 40px;                line-height: 40px;            }            .ui-slide-item .ui-slide-box{                display: none;                position: absolute;                left: 300px;                top: 0;            }            .ui-slide-item:hover > .ui-slide-box{                display: block;            }

<ul class="ui-slide-box">            <li class="ui-slide-item">                <span class="ui-slide-item-text">aaaaaaaaaaaaa</span>                <ul class="ui-slide-box">                    <li class="ui-slide-item">                        <span class="ui-slide-item-text">aaaaaaaaaaaa</span>                        <ul class="ui-slide-box">                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">dddddddd </span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">sssssssssssss</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">eeeeeeeeeeee</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">ccccccccccccc</span>                                <ul class="ui-slide-box">                                    <li class="ui-slide-item">                                        <span class="ui-slide-item-text">aaaaaaaaaaaaa</span>                                        <ul class="ui-slide-box">                                            <li class="ui-slide-item">                                                <span class="ui-slide-item-text">aaaaaaaaaaaa</span>                                                <ul class="ui-slide-box">                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">dddddddd </span>                                                    </li>                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">sssssssssssss</span>                                                    </li>                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">eeeeeeeeeeee</span>                                                    </li>                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">ccccccccccccc</span>                                                    </li>                                                </ul>                                            </li>                                                                                        <li class="ui-slide-item">                                                <span class="ui-slide-item-text">bbbbbbbbbb</span>                                                <ul class="ui-slide-box">                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">sfsdfsdfsd </span>                                                    </li>                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">cvwdfsd</span>                                                    </li>                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">ewewewe</span>                                                    </li>                                                    <li class="ui-slide-item">                                                        <span class="ui-slide-item-text">xxcxc</span>                                                    </li>                                                </ul>                                            </li>                                        </ul>                                    </li>                                </ul>                            </li>                        </ul>                    </li>                                        <li class="ui-slide-item">                        <span class="ui-slide-item-text">bbbbbbbbbb</span>                        <ul class="ui-slide-box">                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">sfsdfsdfsd </span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">cvwdfsd</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">ewewewe</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">xxcxc</span>                            </li>                        </ul>                    </li>                </ul>            </li>            <li class="ui-slide-item">                <span class="ui-slide-item-text">bbbbbbbbbbb</span>                <ul class="ui-slide-box">                    <li class="ui-slide-item">                        <span class="ui-slide-item-text">aaaaaaaaaaaa</span>                        <ul class="ui-slide-box">                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">dddddddd </span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">sssssssssssss</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">eeeeeeeeeeee</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">ccccccccccccc</span>                            </li>                        </ul>                    </li>                </ul>            </li>            <li class="ui-slide-item">                <span class="ui-slide-item-text">cccccccccccccccccc</span>                <ul class="ui-slide-box">                    <li class="ui-slide-item">                        <span class="ui-slide-item-text">rrrrrrrrrrrrrrrrrrrrrrrrrr</span>                        <ul class="ui-slide-box">                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">dddddddd </span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">sssssssssssss</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">eeeeeeeeeeee</span>                            </li>                            <li class="ui-slide-item">                                <span class="ui-slide-item-text">ccccccccccccc</span>                            </li>                        </ul>                    </li>                </ul>            </li>        </ul>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3的pointer-events使用詳解

完全利用CSS實現元素置中

font-size-adjust屬性如何最佳化網頁排版