用纯CSS的方式实现一个横向导航栏+下拉菜单

最新推荐文章于 2024-05-29 09:30:39 发布

喰灯

最新推荐文章于 2024-05-29 09:30:39 发布

阅读量4.3k

点赞数 7

分类专栏：记录文章标签： HTML/CSS

本文链接：https://blog.csdn.net/Candeng1998/article/details/88749430

版权

记录专栏收录该内容

0 篇文章 0 订阅

订阅专栏

记录自己迈出的第一步~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" name="①导航条">

        ul
        {
            margin: 0;
            padding:0;
            width:100%;
            /*去除上和左边距*/
        }
        .foundation>li
        {
            float: left;
            background-color: dimgray;
            width: 19.8%;
            text-align: center;
            border-right: black solid 1px;
            /*总宽100 = 各个li的宽度 + 预留的border宽度*/
        }
        li
        {
            list-style: none;
            /*去掉无序列表符号*/
        }
        a
        {
            text-decoration: none;
            color: aliceblue;
            /*去掉下划线*/
        }
        li:hover
        {
            background-color: rgba(119,120,121,0.96) ;
            /*鼠标划过变色*/
        }


    </style>
    <style TYPE="text/css" name="①下拉菜单">

        .dropdown
        {
            display:none;
            /*鼠标不在上面时 隐藏*/
        }
        .dropdown li
        {
            border-left:1px solid black;
            background: lightyellow;
            font-size: 12px;
            color: lightslategray;
            border-bottom: black 1px solid;
            /*下拉菜单样式设置*/
        }
        .dropdown li:hover
        {
            background: rgba(153,164,68,0.96);
            color: rgba(95,117,164,0.96);
            /*下拉菜单划过变色*/
        }

        #menu11 ul li:hover .dropdown
        {
            display: block;
            /*下拉菜单的展开*/
        }

    </style>
</head>
<body>
    <div id="menu11">
        <ul class="foundation">
            <li>    <a href="#" >11</a>
                    <div class="dropdown">
                        <ul>
                            <li >二级1</li>
                            <li >二级2</li>
                            <li >二级3</li>
                        </ul>
                    </div>
            </li>
            <li>    <a href="#" >11</a>
                <div class="dropdown">
                    <ul>
                        <li >二级1</li>
                        <li >二级2</li>
                        <li >二级3</li>
                    </ul>
                </div>
            </li>
            <li>    <a href="#" >11</a>
                <div class="dropdown">
                    <ul>
                        <li >二级1</li>
                        <li >二级2</li>
                        <li >二级3</li>
                    </ul>
                </div>
            </li>
            <li>    <a href="#" >11</a>
                <div class="dropdown">
                    <ul>
                        <li >二级1</li>
                        <li >二级2</li>
                        <li >二级3</li>
                    </ul>
                </div>
            </li>
            <li>    <a href="#" >11</a>
                <div class="dropdown">
                    <ul>
                        <li >二级1</li>
                        <li >二级2</li>
                        <li >二级3</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <!--导航栏+下拉菜单-->

</body>
</html>

喰灯

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
用纯CSS的方式实现一个横向导航栏+下拉菜单

记录自己迈出的第一步~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" name="①导航条"> ul ...
复制链接

扫一扫