导航条

作者: 游园拾忆 | 来源:发表于2023-07-26 18:42 被阅读0次

导航条设置
Tailwind Navbar
分页、导航条1、导航条2
分页导航栏开班信息
分页、导航条1、导航条2、开班信息
分页导航栏开班信息
Bootstrap - 导航条
Bootstrap - 导航条2
练习二导航条
Swift - 使用导航条和导航条控制器来进行页面切换

样式

image.png

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航test</title>
        <style>
            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                background-color: #f39c9c;
            }

            nav ul li {
                display: inline-block;
                position: relative;
                width: 100px;
                /*text-align: center;*/
            }

            nav ul li:hover > ul {
                display: block;
            }

            nav ul ul {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100px;
                background-color: #f39c9c;
            }

            nav ul ul li {
                display: list-item;
                width: 100%;
                /*text-align: center;*/
            }

            nav a {
                display: block;
                padding: 10px 20px;
                color: #000;
                text-decoration: none;
            }

            nav a:hover {
                background-color: #ea5538;
            }
        </style>
    </head>

    <body>
        <nav>
            <ul>
                <li><a href="#">菜单1</a>
                    <ul>
                        <li><a href="#">子菜单1</a></li>
                        <li><a href="#">子菜单2</a></li>
                        <li><a href="#">子菜单3</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
                <li><a href="#">菜单4</a></li>
                <li><a href="#">菜单5</a>
                    <ul>
                        <li><a href="#">子菜单4</a></li>
                        <li><a href="#">子菜单5</a></li>
                    </ul>
                </li>
                <li><a href="#">菜单6</a></li>
                <li><a href="#">菜单7</a></li>
                <li><a href="#">菜单8</a></li>
            </ul>
        </nav>
    </body>
</html>