欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)鼠標(biāo)懸浮無限向下級(jí)展示的實(shí)例代碼

  發(fā)布時(shí)間:2017-09-07 15:17:15   作者:佚名   我要評(píng)論
本文通過實(shí)例代碼給大家介紹了CSS實(shí)現(xiàn)鼠標(biāo)懸浮無限向下級(jí)展示的實(shí)例代碼,需要的朋友參考下吧

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

*{
                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>

總結(jié)

以上所述是小編給大家介紹的CSS實(shí)現(xiàn)鼠標(biāo)懸浮無限向下級(jí)展示的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示(tooltip)效果

    這篇文章主要介紹了使用CSS content的attr實(shí)現(xiàn)鼠標(biāo)懸浮提示(tooltip)效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法

    昨天寫樣式遇到個(gè)問題,如何讓鼠標(biāo)懸浮DIV后,顯示DIV外的按鈕,可以點(diǎn)擊到按鈕。下面通過本文給大家分享CSS鼠標(biāo)懸浮DIV后顯示DIV外的按鈕解決方法,感興趣的朋友一起看看
    2017-08-26
  • CSS3制作了一個(gè)動(dòng)畫導(dǎo)航效果(鼠標(biāo)懸浮會(huì)放大)

    使用了CSS3的animation、transform、transition制作了一個(gè)動(dòng)畫導(dǎo)航效果,其中利用了Ligature Icon UI制作了導(dǎo)航中的ICON圖標(biāo),需要了解的朋友可以參考下
    2012-12-27
  • css實(shí)現(xiàn)縷空遮罩層的示例代碼

    這篇文章主要介紹了css實(shí)現(xiàn)縷空遮罩層的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2020-06-03
  • css3遮罩層鏤空效果的多種實(shí)現(xiàn)方法

    這篇文章主要介紹了css3遮罩層鏤空效果的多種實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)
    2020-05-11
  • CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果

    這篇文章主要介紹了CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-03-09
  • CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果

    這篇文章主要介紹了CSS實(shí)現(xiàn)鼠標(biāo)移至圖片上顯示遮罩層效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2019-11-20
  • CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn)

    這篇文章主要介紹了CSS 鼠標(biāo)懸浮在圖片上添加遮罩層效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-12-17

最新評(píng)論