html5/Css3 导航样式

最新推荐文章于 2024-02-22 11:19:08 发布

置顶赛文

最新推荐文章于 2024-02-22 11:19:08 发布

阅读量649

点赞数

分类专栏： html5/Css3

本文链接：https://blog.csdn.net/qq_39493777/article/details/78047842

版权

html5/Css3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .clear:after{
            content: "\200B";
            display: block;
            clear: both;
        }
        div{
            width: 1000px;
            height: 40px;
            background: #666666;
            margin: 200px auto;
            border-radius: 5px;
        }
        li{
            list-style: none;
        }
        .u1{
            display: inline-block;
            float: left;
        }
        .u2{
            float: left;
            display: inline-block;
        }
        .u3{
            float: left;
            display: inline-block;
        }
        .u4{
            /*float: left;*/
            display: inline-block;
        }
        li{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
            color: white;
        }
        .title1:hover{
            background: red;
        }
        .child1{
            background: #666666;
            display: none;
        }
        .u1:hover .child1{
            display: block;
        }
        .title2:hover{
             background: red;
         }
        .child2{
            background: #666666;
            display: none;
        }
        .u2:hover .child2{
            display: block;
        }
        .title3:hover{
            background: red;
        }
        .child3{
            background: #666666;
            display: none;
        }
        .u3:hover .child3{
            display: block;
        }
        .title4:hover{
            background: red;
        }
        .child4{
            background: #666666;
            display: none;
        }
        .u4:hover .child4{
            display: block;
        }


    </style>
</head>
<body>
    <div class="clear">
        <ul class="u1">
            <li class="title1">首页</li>
            <li>
                <ul class="child1">
                    <li>公司简介</li>
                    <li>公司文化</li>
                    <li>关于我们</li>
                    <li>联系我们</li>
                </ul>
            </li>
        </ul>
        <ul class="u2">
            <li class="title2">项目</li>
            <li>
                <ul class="child2">
                    <li>安卓</li>
                    <li>苹果</li>
                    <li>测试</li>
                    <li>Php</li>
                </ul>
            </li>
        </ul>
        <ul class="u3">
            <li class="title3">项目</li>
            <li>
                <ul class="child3">
                    <li>安卓</li>
                    <li>苹果</li>
                    <li>测试</li>
                    <li>Php</li>
                </ul>
            </li>
        </ul>
        <ul class="u4">
            <li class="title4">项目</li>
            <li>
                <ul class="child4">
                    <li>安卓</li>
                    <li>苹果</li>
                    <li>测试</li>
                    <li>Php</li>
                </ul>
            </li>
        </ul>


    </div>
</body>
</html>

赛文

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5/Css3 导航样式

html>html lang="en">head> meta charset="UTF-8"> title>导航title> style> *{ margin: 0px; padding: 0px; } .clear:after{ content: "
复制链接

扫一扫

专栏目录