HTML+CSS 实现下拉三级菜单

最新推荐文章于 2023-10-30 18:44:29 发布
最新推荐文章于 2023-10-30 18:44:29 发布
阅读量4.7k 收藏 32
点赞数 6
分类专栏： 前端 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31063727/article/details/102489845
版权

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单</title>
</head>
<style>
    /*重置浏览器默认样式*/
    * {
        padding: 0;
        margin: 0;
        font-family: "Microsoft YaHei";
        list-style: none;
    }

    #main {
        width: 100%;
        background: #3c3c3c;
    }

    /* 清楚浮动，使div盒子能被撑起来 */
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }

    .menu {
        position: relative;
        margin-left: 8%;
    }

    /* 每一个li标签的样式 */
    .menu li {
        width: 130px;
        height: 40px;
        /* 行内高度 */
        line-height: 40px;
        /* 文字居中 */
        text-align: center;
        margin-left: 4%;
    }

    .menu>li a {
        text-decoration: none;
        color: #2aabd2;
    }

    .menu>li {
        /*让一级菜单的li浮动*/
        float: left;
    }

    /* 二级菜单样式 */
    .second-menu {
        /* 将二级菜单隐藏 */
        display: none;
        position: absolute;
    }

    /* hover属性，鼠标移动到li标签上触发，将对应li标签的耳机菜单显示，移开后恢复到原来样式 */
    .menu li:hover>ul {
        display: block;
    }

    .second-menu li a {
        color: #0c0c0c;
    }

    .second-menu {
        background: #5a5959;
    }

    /* 三级标签样式 */
    .third-menu {
        display: none;
        background: #5a5959;
        position: absolute;
        /* 相对于其父标签（二级标签）进行绝对定位 */
        margin-left: 125px;
        margin-top: -40px;
    }

    /* 三级菜单下的 a标签文字颜色 */
    .third-menu li a {
        color: #54afec;
    }

    .second-menu li:hover ul {
        display: block;
    }
</style>

<body>
    <div id="main" class="clearfix">
        <ul class="menu clearfix">
            <li>
                <a href="#">联系我们</a>
            </li>
            <li>
                <a href="#">公司掠影</a>
                <ul class="second-menu clearfix">
                    <li>
                        <a href="">版权声明</a>
                        <ul class="third-menu clearfix">
                            <li>
                                <a href="">1</a>
                            </li>
                            <li>
                                <a href="">2</a>
                            </li>
                            <li>
                                <a href="">3</a>
                            </li>
                        </ul>
                    <li>
                        <a href="">在线留言</a>
                        <ul class="third-menu clearfix">
                            <li>
                                <a href="">1</a>
                            </li>
                            <li>
                                <a href="">2</a>
                            </li>
                            <li>
                                <a href="">3</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">技术支持</a>
                        <ul class="third-menu clearfix">
                            <li>
                                <a href="">1</a>
                            </li>
                            <li>
                                <a href="">2</a>
                            </li>
                            <li>
                                <a href="">3</a>
                            </li>
                        </ul>
                    </li>
            </li>
        </ul>
        </li>
        <li>
            <a href="#">新闻中心</a>
            <ul class="second-menu">
                <li>
                    <a href="">版权声明</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                <li>
                    <a href="">在线留言</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">技术支持</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">版权声明</a>
        </li>
        <li>
            <a href="#">在线留言</a>
            <ul class="second-menu">
                <li>
                    <a href="">版权声明</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                <li>
                    <a href="">在线留言</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="">技术支持</a>
                    <ul class="third-menu clearfix">
                        <li>
                            <a href="">1</a>
                        </li>
                        <li>
                            <a href="">2</a>
                        </li>
                        <li>
                            <a href="">3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">技术支持</a></li>
        </ul>
    </div>
</body>

</html>

效果图如下： 

小鹏仔0514
关注
  • 6
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现导航栏下拉菜单（带下拉三级菜单）
10-22 3518
【代码】实现导航栏下拉菜单（带下拉三级菜单）
HTML中用js制作三级下拉菜单
qq_43575703的博客
03-08 1552
HTML中用javascript制作三级下拉菜单（先水平再垂直） 菜鸟版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
浅谈HTML中的二级菜单
qq_45411328的博客
07-13 1598
二级菜单 主要用到的HTML中的属性和技术： 1.display属性 2.定位（相对定位和绝对定位）：两个都能实现不过效果有所差异 相对定位：二级菜单会随着你鼠标的放的位置发生变化相对的是鼠标放在的选项上面（个人觉得相对定位更加人性化） 绝对定位：无论鼠标放在那个框上面二级菜单总是出现在一个地方（由于绝对定位不脱离文档流所以二级菜单还是占据位置有可能会对网页造成影响） 3.hover 4.元素之间的关系（兄弟 父子之类的） 代码 <!DOCTYPE html> <html lang="en
[网页示例]三级联动下拉菜单
最新发布
Kara_YYDS的博客
10-30 435
【代码】[网页示例]三级联动下拉菜单。
HTML三级菜单
White_Poppy的博客
10-18 8934
html文件 &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单2&lt;/a&gt; &lt
html三级导航栏编写
JackieDYH的博客
02-09 2619
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级导航</title> <style> * { margin:0; padding:0; } ul,ol,li { list-styl...
纯html+css三级菜单
小武的博客
06-11 3124
效果图如下： 第一种方法：ul li #nav {line-height: 72px; list-style-type: none;color:#ffffff} #nav a {display: block; width: 150px; text-align:center; height:72px;color:#ffffff} #nav a:link { text-deco...
前端面试实操题二：用HTML，CSS写一个三级菜单
qq_45259815的博客
07-23 1803
制作一个三级菜单，html，css，主要用display以及定位position
纯html+css制作三级下拉菜单
09-24
接下来，对于三级菜单，原理与二级菜单相同，但嵌套更深。在一级菜单项的子`<ul>`中，再嵌套一层`<ul>`来创建三级菜单。当鼠标悬停在二级菜单项上时，三级菜单会出现。这同样通过CSS的`:hover`选择器和`display`属性...
html5+css3下拉菜单特效代码
03-20
要实现下拉菜单的特效，我们可以利用以下CSS3特性： 1. **伪类选择器**：如`:hover`、`:focus`和`:active`，用于在不同状态下改变元素的样式。例如，当鼠标悬停在主菜单项上时，可以显示下拉菜单： ```css ....
HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
01-09
HTML制作多级菜单_一级下拉菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
三级下拉列表 select 网页 html5
03-29
模仿地区选择下拉列表，做的，学院专业班级，下拉列表
纯CSS实现的三级下拉菜单实现代码
09-27
例如，一级菜单项下可能有二级和三级菜单项，三级菜单项通过嵌套的`<ul>`实现。 ```html <li><a href="#">菜单1 <li><a href="#">子菜单1-1 <li><a href="#">三级菜单1-1-1</a></li> ``` 2. ...
css三级下拉菜单实现方法分享
09-25
css三级下拉菜单实现方法分享，大家参考使用吧
HTML+ CSS来实现一个简单的二级菜单栏
qq_40992225的博客
09-20 6220
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。1.首先，我们先创建一级菜单。
三级下拉列表怎么做 html,三级下拉菜单 变量_html/css_WEB-ITnose
weixin_28862557的博客
06-03 437
function list(idstr){var name1="subtree"+idstr; //定义一个变量 值为字符串“subtree”加上传进来的IDvar name2="img"+idstr; //idstr是一个数字字符,用于区别不同的子菜单和图片var objectobj=document.all(name1);//获取页面中ID或者name为name1的元素var imgo...
html5三级下拉菜单,Bootstrap多级下拉菜单插件
weixin_42467224的博客
06-03 1170
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展，可以生成多级子菜单的多级下拉菜单插件。原生的bootstrap下拉菜单只有一层，通过bootstrap-submenu插件，可以生成多级子菜单。安装可以通过npm和bower来安装bootstrap-submenu插件。$ npm install bootstrap-submenu$ bowe...
html 动态生成多级联动,JavaScript自定义多级联动浮动菜单[一]
weixin_42109598的博客
06-05 515
烈火网教程 类似的多级浮动菜单网上也很多实例，但大部分都是只针对一种情况或不够灵活，简单说就是做死了的。所以我就想到做一个能够自定义菜单的，有更多功能的多级浮动菜单。而其中的关键就是怎么根据自定义的菜单结构来生成新菜单，关键中的难点就是怎么得到下级菜单结构和容器对象的使用。理想的做法是每次有下级菜单时，从对象直接取得下级菜单结构，放到容器对象中，并且容器能重用，而不是每次都重新生成。但想了很久也想...
html+css多级目录手风琴式分类导航菜单
qq_43560721的博客
11-03 5091
menu.html代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级目录手风琴式分类导航菜单</title> <link rel="stylesheet" type="text/css" ch...
html+css三级下拉
05-30
三级下拉菜单可以通过HTML和CSS结合实现。下面是一个简单的例子： HTML代码： ``` <ul class="menu"> <li><a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a> <ul> <li><a href="#">三级菜单1</a></li> <li><a href="#">三级菜单2</a></li> </ul> </li> <li><a href="#">二级菜单2</a></li> </ul> </li> <li><a href="#">一级菜单2</a></li> <li><a href="#">一级菜单3</a></li> </ul> ``` CSS代码： ``` .menu { list-style:none; margin:0; padding:0; } .menu li { position:relative; float:left; padding:0; margin:0; } .menu li a { display:block; padding:0 10px; line-height:20px; height:20px; text-decoration:none; color:#333; border:1px solid #ccc; border-bottom:none; } .menu li ul { display:none; position:absolute; top:20px; left:0; margin:0; padding:0; background:#fff; border:1px solid #ccc; border-top:none; } .menu li:hover > ul { display:block; } .menu li ul li { float:none; display:block; padding:0; margin:0; border-bottom:1px solid #ccc; } .menu li ul li ul { top:0; left:100%; } ``` 解释： 1. HTML中使用了无序列表（ul）和列表项（li）来实现菜单结构。 2. 通过CSS设置菜单的样式，包括列表样式、边距、内边距、字体颜色、边框等。 3. 通过CSS设置子菜单的样式，包括显示位置、背景颜色、边框等。 4. 通过CSS设置鼠标悬停时子菜单的显示方式。 注意： 1. 本例中只实现了三级菜单，如果需要更多级别的菜单，可以根据类似的方式进行扩展。 2. 本例中使用了CSS选择器“>”来选择直接子元素，这是为了避免子菜单的样式对其他元素产生影响。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值