• 技术文章 >web前端 >html教程

    html怎么实现二级选项卡

    coldplay.xixicoldplay.xixi2021-02-20 11:14:50原创107

    html实现二级选项卡的方法:首先打开写网页代码的软件,并新建一个html网页文件,在body里写上html代码;然后在【<style>】标签里写上css代码即可。

    本教程操作环境:windows7系统、html5版,DELL G3电脑,该方法适用于所有品牌电脑。

    html实现二级选项卡的方法:

    1、打开写网页代码的软件,并新建一个html网页文件,在body里写上html代码:

    <body>
    <div class="a">
    <ul>
    <li>
    <a href="#">一级</a>
    <ul class="d">
    <li><a href="#">二级</a></li>
    <li><a href="#">二级</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>

    2、在<style></style>里写上css代码:

        <style type="text/css">
    .a ul li ul{
    display: none;/*将 二级 菜单隐藏起来*/
    }
    .a ul li:hover ul{
    display: block;/*当鼠标移动到一级标签后,ul即二级菜单显示出来*/
    }
        </style>

    3、保存运行后如图,当鼠标放上一级菜单后显示二级出来,完成全部步骤

    92ce29c81d8326f210fb9dd9c7b37cd.png

    相关学习推荐:html视频教程

    以上就是html怎么实现二级选项卡的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:html 二级选项卡
    上一篇:如何将多个html文件合并一个文件 下一篇:html怎么让超链接没有下划线
    第15期线上培训班

    相关文章推荐

    • JS将滑动门改为选项卡的实现方法• word选项卡是什么• uniapp如何实现选项卡功能• 磁盘属性对话框有什么选项卡

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网