CSS前段学习之加个下拉列表

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS前段学习之加个下拉列表相关的知识，希望对你有一定的参考价值。

1216.

加个下拉列表：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                font-family: "微软雅黑";
            }
            .top_container{
                width: 100%;
                height: 40px;
                background: #000000;
                
            }
            .top_nav{
                width: 600px;
                height: 40px;
                margin: 0px auto;
                
                
            }
            .top_nav_lv1{
                width: 150px;
                max-height: 40px;
                background: #000000;
                float: left;
                text-align: center;
                line-height: 40px;
                overflow: hidden;
                color: #FFFFFF;
                
            }
            .top_nav_lv1:hover{
                /*最大高度*/
                max-height: 400px;                
                /*过渡效果*/
                transition: 1s;                
                /*鼠标小手*/
                cursor: pointer;
                
            }
            .top_nav_lv1 li{
                color: #FFFFFF;
            }
            .top_nav_lv1 li:hover{
                background-color: blue;
                
            }
            .top_nav_lv1 ul{
                /*opacity: 0.5;*/
            }
            .top_container,.top_nav_lv1{
                border-radius: 10px;
            }
        </style>
    
    <body>
        
        <div class="top_container">
            <div class="top_nav">
                <div class="top_nav_lv1">导航1
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>
                        <li>导航D</li>
                    </ul>
                </div>
                <div class="top_nav_lv1">导航2
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>
                        <li>导航D</li>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>
                        <li>导航D</li>
                    </ul>
                </div>
                <div class="top_nav_lv1">导航3
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>
                        
                    </ul>
                </div>
                <div class="top_nav_lv1">导航4
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        
                    </ul>
                </div>
            </div>
        </div>
        
    </body>
</html>

 

以上是关于CSS前段学习之加个下拉列表的主要内容，如果未能解决你的问题，请参考以下文章

vue学习之二

Bootstrap 学习之js插件（下拉菜单（Dropdown）插件）

Python第五周前端学习之HTML5/ CSS / JS

IOS学习之UiTableView下拉刷新与自动加载更多，百年不变的效果

Android学习之两款下拉刷新库分享

iOS学习之代码块(Block)