下拉列表

首页 > 代码库 > 下拉列表

2024-08-29 12:10:04 219人阅读

今天学习了通过CSS制作下拉列表，和CSS的一些动画效果。

下拉列表：

首先确定鼎城框架，分成几个导航，在各个导航中防区div，div中使用<ul>也就是无序列表，在<ul>的子菜单，也就是<li>中放入想要通过下拉列表展示的文字或者其他内容。

<div class="kuang">
        <div id="nav">
            <div id="buttom-1" class="banner">第一个
                <ul>
                    <li>艾欧尼亚</li>
                    <li>皮城警备</li>
                    <li>弗雷尔卓德</li>
                    <li>比尔吉沃特</li>
                    <li>巨龙之巢</li>
                </ul>
            </div>
            <div id="buttom-2" class="banner">第二个
                <ul>
                    <li>de_dust2</li>
                    <li>de_aztec</li>
                    <li>cs_747</li>
                    <li>cs_italy</li>
                </ul>
            </div>
            <div id="buttom-3" class="banner">第三个
                <ul>
                    <li>反恐精英</li>
                    <li>归家异途</li>
                    <li>方舟</li>
                </ul>
            </div>
            <div id="buttom-4" class="banner">第四个
                <ul>
                    <li>沙漠之鹰</li>
                    <li>死亡骑士</li>
                    <li>皮蛋宝宝</li>
                    <li>破晓黎明</li>
                </ul>
            </div>
            <div id="buttom-5" class="banner">第五个
                <ul>
                    <li>无尽之刃</li>
                    <li>幽梦之灵</li>
                    <li>狂徒盔甲</li>
                    <li>兰顿之兆</li>
                    <li>中亚沙漏</li>
                </ul>
            </div>
        </div>
    </div>

依然使用内嵌样式表，给下拉列表的各个框定义属性。

<style type="text/css">
    *{
        margin:0px;
        padding:0px;
    }
    .kuang{
        position:absolute;
        width:100%;
        height:40px;
    }
    #nav{
        width:500px;
        height:40px;
        background-color:#9FF;
        position:relative;
        top:0px;
        margin:0px auto;
    }
    .banner{
        float:left;
        text-align:center;
        line-height:40px;
        width:20%;
        height:40px;
    }
    .banner:hover{
        cursor: pointer;
        background-color:#FF3;
    }
    div ul{
        list-style:none;
        max-height:o;
        background-color:#606;
        overflow: hidden;
        transition: max-height:0.5s;
        
    }
    .banner:hover ul {
                width: 100%;
                max-height: 160px;
            }
            

            div ul li:hover {
                background-color:#0FF
            }