html - 下拉選單

zyljjf發表於2017-09-26
原文網址 : https://blog.csdn.net/zyljjf/article/details/78098495
HTML

html - 下拉選單 （display block /none）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .a{
                width: 205px;

            }

            .b{
                width: 200px;
                height: 50px;
                background-color: limegreen;
                text-align: center;
                line-height: 50px;
                color: #ffffff;
            }

            .c{
                width: 200px;
                height: 300px;
                background-color: gainsboro;
                display: none;
                /*visibility: hidden;*/
            }

            ul{
                list-style: none;
                margin-left: -40px; 
            }
            ul li{
                line-height: 50px;
                display: block;
                width: 200px;
                text-align: center;
            }

            .a:hover{
                cursor: pointer;
            }

            .a:hover .c{
                display: block;
            }

            .a:hover .b{
                background-color: green;
            }

            li:hover{
                background-color: gray;
                color: #FFFFFF;
            }

        </style>
    </head>
    <body>

        <div class="a">

            <div class="b">
                關於我們
            </div>

            <div class="c">
                <ul>
                    <li>公司簡介</li>
                    <li>董事長致辭</li>
                    <li>企業文化</li>
                    <li>團隊風采</li>
                </ul>
            </div>

        </div>

    </body>
</html>

這裡寫圖片描述

相關文章