| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1082 人关注过本帖
标题:html+css就够了
只看楼主 加入收藏
m3440426898
Rank: 2
等 级:论坛游民
帖 子:41
专家分:17
注 册:2022-2-3
结帖率:90.91%
收藏
 问题点数:0 回复次数:1 
html+css就够了
效果演示.zip (449.18 KB)

只能写成这样了,只有二级,三级怎么弄呀,如上面那个附件视频里面一样。
<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .father{
            display: inline-block;
            position: relative;
            background-color: red;
            font-size:18px;
            float:left;
            margin-left:23px;
        }
        .son{
            position: absolute;
            display: none;
            background-color: green;
            top: 24px;
            right: 0;
        }
        .son li:hover
        {
            background-color: blue;
        }
        .father:hover .son{
            display: block;
        }
    </style>
</head>
<body>
    <div>
            <li class="father">一级菜单
                <ul class="son">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>

            <li class="father">一级菜单
                <ul class="son">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>

            <li class="father">一级菜单
                <ul class="son">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
    </div>
</body>
</html>
搜索更多相关主题的帖子: 二级 css 菜单 html class 
2022-10-19 19:03
xjlzq
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2022-11-14
收藏
得分:0 
<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .father {
            display: inline-block;
            position: relative;
            background-color: red;
            font-size: 18px;
            float: left;
            margin-left: 23px;
        }

        .son {
            position: absolute;
            display: none;
            background-color: green;
            top: 24px;
            right: 0;
        }

        .son li:hover {
            background-color: blue;
        }

        .father:hover .son {
            display: block;
        }
        .s1{
            display: none;
        }
        .f1:hover .s1{
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <li class="father">一级菜单
            <ul class="son">
                <li>二级菜单</li>
                <div class="f1">
                    <li>二级菜单
                        <div class="s1">
                            <ul>
                                <li>三级</li>
                                <li>三级</li>
                            </ul>

                        </div>
                    </li>
                </div>
                <li>二级菜单</li>
            </ul>
        </li>

        <li class="father">一级菜单
            <ul class="son">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>

        <li class="father">一级菜单
            <ul class="son">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </div>
</body>

</html>
2022-11-14 21:37
快速回复:html+css就够了
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.044318 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved