1. 程式人生 > >菜單欄鼠標經過伸縮效果

菜單欄鼠標經過伸縮效果

doctype width radi pre flow text oct font idt

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        nav{
            height: 30px;
            width: 300px;
            margin
: 50px auto; overflow: hidden; transition: 2s; border-radius: 15px; } nav:hover{ height: 180px; } h2{ background: orange; color: white; height: 30px; line-height: 30px; }
nav:hover h2{ background: black; } ul{ background: orange; color: white; } ul li{ height: 30px; line-height: 30px; } </style> </head> <body> <nav> <
h2>菜單欄</h2> <ul> <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> <li>首頁</li> </ul> </nav> </body> </html>

菜單欄鼠標經過伸縮效果