zoukankan html css js c++ java

[刘阳Java]_CSS普通菜单制作

简单给大家介绍一下CSS普通菜单制作，先看图

功能很简单

UL制作菜单
鼠标进入LI的CSS伪类，实现菜单弹出效果

源码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul {
                list-style: none;
            }
            .nav > li {
                float: left;
            }
            a {
                text-decoration: none;
                background: #D2691E;
                color: #FFFFFF;
                display: block;
                height: 28px;
                line-height: 28px;
                padding: 0 18px;
            }
            .nav > li:first-child a {
                border-radius: 5px 0px 0px 5px;
            }
            .nav > li:last-child a {
                border-radius: 0px 5px 5px 0px;
            }
            .menu {
                padding: 0;
                display: none;
            }
            .menu > li:last-child a {
                border-radius: 0px 0px 5px 5px;
            }
            .menu > li:hover a {
                background-color: #FF910C;
            }
            .nav > li:hover > .menu {
                display: block;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li><a href="#">下拉菜单</a></li>
            <li>
                <a href="#">下拉菜单</a>
                <ul class="menu">
                    <li><a href="#">子菜单-1</a></li>
                    <li><a href="#">子菜单-2</a></li>
                    <li><a href="#">子菜单-2</a></li>
                </ul>
            </li>
            <li><a href="#">下拉菜单</a></li>
            <li><a href="#">下拉菜单</a></li>
        </ul>
    </body>
</html>

查看全文

相关阅读:
Confluence 6 尝试从 XML 备份中恢复时解决错误
 Confluence 6 XML 备份恢复失败的问题解决
 Confluence 6 找到在创建 XML 备份的时候出现的错误
 Confluence 6 XML 备份失败的问题解决
 c trans
How To Use API Online?
c string
c function
c array
FileCopy

原文地址：https://www.cnblogs.com/liuyangjava/p/8358363.html