Home > Article > Web Front-end > CSS3 simulates animated drop-down menu effect

CSS3 simulates animated drop-down menu effect

巴扎黑Original: 2017-05-14 13:45:561362browse

The drop-down menu made using css3 has a very beautiful appearance and is applicable to all major websites. Today, through this article, I will share with you the effect of the animated drop-down menu made based on css3. Friends who need it can refer to it

Drop-down menu simulation rendering:

CSS3:

<style>
            #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
            #box:hover{height:250px;}
            #box ul{list-style:none; margin:0; padding:0;}
            #box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}
        </style>

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="box">
            <ul>
                <li>This&#39;s 1</li>
                <li>This&#39;s 2</li>
                <li>This&#39;s 3</li>
                <li>This&#39;s 4</li>
                <li>This&#39;s 5</li>
            </ul>
        </p>
    </body>
</html>

The above is the detailed content of CSS3 simulates animated drop-down menu effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：30 CSS3 SelectorsNext article：30 CSS3 Selectors

See more

CSS3 simulates animated drop-down menu effect

Related articles