用css hover 实现下拉菜单

admin · 2014-10-30 12:58:01

hover 不仅可以用于a标签，其它的标签页可以。

原理：实现下拉的原理，通过hover 改变样式

是来代码

<!Doctype html>
<html>
    <head>
        <meta charset="uft-8" />
        <style>
            ul { padding: 0; margin: 0;}
            li { list-style-type:  none; padding: 0 5px; margin:  0; }
            #ul > li { float: left;}
            .hide { display: none;}
            .show:hover .hide { display: block; }
        </style>
    </head>
    
    <body>
        <ul id="ul">
            <li class="show">
                <a href="#">ipbbs.net</a>
                <ul class="hide">
                    <li> <a href="#">ipbbs.net</a> </li>
                    <li> <a href="#">ipbbs.net</a> </li>
                    <li> <a href="#">ipbbs.net</a> </li>
                </ul>
            </li>
            <li> <a href="#">ipbbs.net</a> </li>
            <li> <a href="#">ipbbs.net</a> </li>
        </ul>
        
    </body>
</html>

网站开发技术

#1 2014-10-30 12:58:01

用css hover 实现下拉菜单

页脚