HTML下拉菜单代码实现

已于 2022-05-10 23:37:11 修改
阅读量1.3w 收藏 73
点赞数 11
分类专栏： html/css笔记 文章标签： html css css3
于 2022-05-10 23:36:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45768538/article/details/124700214
版权

HTML CSS 下拉菜单 二级菜单 动画效果
关键词由CSDN通过智能技术生成

HTML下拉菜单代码实现

  1. 实现结果
    在这里插入图片描述
    在这里插入图片描述
  2. HTML代码
<nav class="div_nav">
        <ul>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层</a>
                <ul class="second">
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
            </li>
        </ul>
    </nav>
  1. CSS代码
   /* 消除内外边距 */    
    * {
        margin: 0px;
        padding: 0px;
    }
    /* 消除列表的小点 */    
    li {
        list-style: none;
    }
    a {
        /* 行内元素转块内元素 */
        display: block;
        /* 去除超链接下划线 */
        text-decoration: none;
        /* 字体颜色 */
        color: black;
        /* 使用内边距撑开盒子，以便适应不同字数的菜单项 */
        padding: 10px 15px;
        /* 设置字体大小 */
        font-size: 14px;
        /* 设置背景颜色 */
        background-color: rgb(218, 239, 246);
    }
    /* 设置鼠标经过时的样式 */    
    a:hover {
        background-color: rgb(195, 223, 247);
        /* 使用动画为字体添加动态变化的阴影 */
        animation: shadow 1s linear 0s infinite alternate;
    }
    /* 倒数四个a添加有边框-一级菜单 */    
    .div_nav>ul>li:nth-of-type(-n+4)>a {
        border-right: 1px solid;
        border-color: rgb(204, 219, 212);
    }
    /* 同上-二级菜单*/    
    .div_nav>ul>li>ul>li:nth-of-type(-n+4)>a {
        border-bottom: 1px solid;
        border-color: rgb(184, 188, 186);
    }
    /* 最外层盒子设置高度和上边距 */    
    .div_nav {
        height: 36.8px;
        margin-top: 100px;
    }
    /* 一级菜单项设置向左浮动 */    
    .div_nav>ul>li {
        float: left;
    }
    /* 菜单项居中显示 */    
    .div_nav>ul {
        width: 476px;
        height: 100%;
        margin-left: 50%;
        transform: translate(-50%);
    }
    /* 隐藏二级菜单 */    
    .second {
        display: none;
    }
    /* 鼠标经过时显示二级菜单 */   
    .div_nav>ul>li:hover .second {
        display: block;
    }
    /* 字体阴影的动画设计 */    
    @keyframes shadow {
        0% {
            color: black;
            text-shadow: 0px 0px 0px rgba(148, 202, 244, 0.689);
        }
        100% {
            color: rgb(86, 88, 88);
            text-shadow: 0px 0px 20px rgb(32, 36, 249);
        }
    }
  1. 完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
</head>
<style>
    /* 消除内外边距 */
    
    * {
        margin: 0px;
        padding: 0px;
    }
    /* 消除列表的小点 */
    
    li {
        list-style: none;
    }
    
    a {
        /* 行内元素转块内元素 */
        display: block;
        /* 去除超链接下划线 */
        text-decoration: none;
        /* 字体颜色 */
        color: black;
        /* 使用内边距撑开盒子，以便适应不同字数的菜单项 */
        padding: 10px 15px;
        /* 设置字体大小 */
        font-size: 14px;
        /* 设置背景颜色 */
        background-color: rgb(218, 239, 246);
    }
    /* 设置鼠标经过时的样式 */
    
    a:hover {
        background-color: rgb(195, 223, 247);
        /* 使用动画为字体添加动态变化的阴影 */
        animation: shadow 1s linear 0s infinite alternate;
    }
    /* 倒数四个a添加有边框-一级菜单 */
    
    .div_nav>ul>li:nth-of-type(-n+4)>a {
        border-right: 1px solid;
        border-color: rgb(204, 219, 212);
    }
    /* 同上-二级菜单*/
    
    .div_nav>ul>li>ul>li:nth-of-type(-n+4)>a {
        border-bottom: 1px solid;
        border-color: rgb(184, 188, 186);
    }
    /* 最外层盒子设置高度和上边距 */
    
    .div_nav {
        height: 36.8px;
        margin-top: 100px;
    }
    /* 一级菜单项设置向左浮动 */
    
    .div_nav>ul>li {
        float: left;
    }
    /* 菜单项居中显示 */
    
    .div_nav>ul {
        width: 476px;
        height: 100%;
        margin-left: 50%;
        transform: translate(-50%);
    }
    /* 隐藏二级菜单 */
    
    .second {
        display: none;
    }
    /* 鼠标经过时显示二级菜单 */
    
    .div_nav>ul>li:hover .second {
        display: block;
    }
    /* 字体阴影的动画设计 */
    
    @keyframes shadow {
        0% {
            color: black;
            text-shadow: 0px 0px 0px rgba(148, 202, 244, 0.689);
        }
        100% {
            color: rgb(86, 88, 88);
            text-shadow: 0px 0px 20px rgb(32, 36, 249);
        }
    }
</style>


<body>
    <nav class="div_nav">
        <ul>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层</a>
                <ul class="second">
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
            </li>
        </ul>
    </nav>
</body>

</html>
K I S
关注
  • 11
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
html下拉菜单栏代码
weixin_30678349的博客
08-07 1万+
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯CSS实现下拉菜单</title> <style> * { padding: 0; margin: 0; } body { font:14px "Microso...
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1342
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
前端 `select` 标签如何创建下拉菜单？
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-29 758
本文详细介绍了如何使用标签来创建下拉菜单，包括基本概念、代码示例以及一些高级用法和技巧。通过上述示例和讲解，你应该能够更好地理解和掌握元素的使用方法，并将其应用到实际项目中去。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，
HTML学习之简单的下拉菜单
m0_74164855的博客
03-27 2079
需要先做这个效果，要不接下来的content内容没有显示结果。主体内容写完后，我们设计它的样式就可以了。首先，我们先设计<body>中的内容。运行结果：（鼠标图案在图片上没有显示）
HTML下拉框，下拉菜单源码
09-05
这是一个有趣的HTML下拉框，下拉菜单功能，得体大方，方块式呈现下拉功能
html下拉菜单的写法
weixin_62394768的博客
07-09 4103
今天我在写导航栏的时候就想有没有可以伸缩的导航栏，简单来说，我想要的那种东西就是导航栏。 就像这样，然后我就像怎么能拿这样有一个东西写出来。 还是用的div分块，代码如下 之后的操作就是用css对页面布局进行操作了 要注意这里的display:inline-block是指不设置宽度时，内容撑开宽度，不会独占一行，其他的就没有什么需要注意的点了，学过html的应该都能理解，无非是设置一下颜色，长宽之类的，对我来说需要注意的就是display属性的用法 以上代码所写出来的下拉按钮如图 非常好用下拉列表在我们
HTML5 Bootstrap响应式手机导航下拉菜单代码
06-05
在这个"HTML5 Bootstrap响应式手机导航下拉菜单代码"中，开发者可以找到实现手机端导航栏下拉功能的具体代码。这种导航菜单在小屏幕设备上特别有用，因为它允许用户在一个紧凑的空间内浏览多个导航选项，而不必在...
jQuery下拉菜单的实现代码
11-26
今天我给大家介绍jquery下拉菜单的实现代码，具体代码如下所述： <!DOCTYPE html> <head lang=”en”> <meta charset=”UTF-8″> * { padding: 0; margin: 0; ul { list-style: none; .wrap { width...
JavaScript 下拉菜单实现代码
10-29
为了在实际项目中应用这个下拉菜单，可以将上述HTML、CSS和JavaScript代码整合到一个文件或分别放在不同的文件中，然后根据需要进行调整和优化，以适应不同网页布局和设计风格的要求。同时，也可以考虑使用现代前端...
HTML5输入框下拉菜单功能的示例代码
01-18
1.单选框代码 性别： <input name=sex value= type=radio>男 <input name=sex value= type=radio>女 需要注意的是单选框name值需保持一致 样式： 复选框 2.复选框代码 喜欢的类型： <input ...
jQuery手机端无限级导航下拉菜单代码
06-05
"jQuery手机端无限级导航下拉菜单代码"就是一个解决此类问题的方案，它允许用户在一个简洁的界面下访问多级菜单，而无需展开多个屏幕。本文将详细介绍这个代码实现的关键技术和原理。 首先，jQuery是一个广泛使用的...
HTML下拉菜单栏
chxul的博客
03-28 357
【代码】HTML下拉菜单栏。
html编写一个简易导航栏带下拉菜单 以下是一个简单的HTML代码示例，实现了一个导航栏带有下拉菜单的效果： ```html ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜style＞
酸奶公园
01-15 1526
你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到居中的导航栏带有下拉菜单的效果。你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到调整后的导航栏标签之间的间距。你可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到导航栏带有下拉菜单的效果。要使导航栏居中，你可以使用CSS来设置导航栏的样式。请确保图片的路径和文件名是正确的，并且图片文件存在于指定的路径中。要调整导航栏标签之间的间距，可以通过CSS中的。
html - 下拉菜单
zyljjf的博客
09-26 358
html - 下拉菜单 （display block /none）<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .a{ width: 205px; }
HTML之下拉菜单
一岁一枯荣的博客
09-28 2632
话不多说，直接上代码。 <meta charset="UTF-8"> .a{ width: 200px; } .b{ width: 2
HTML下拉菜单（超详细）：
热门推荐
qq_56045326的博客
10-24 3万+
html代码段： <!--下拉菜单--> <div class="downorder"> <button class="order"> 下拉菜单 </button> <div class="downtext"> <a href="">text1</a> <a href="">text2</a> <a ..
HTML简单的下拉菜单
Rifhvk的专栏
12-30 6848
打造下拉菜单body,td { font-size:12px; font-family:宋体}a:link {  color: #ffffff; text-decoration: none}a:visited {  color: #ffffff; text-decoration: none}a:hover {  color: #ff9933; text-decoration: none}table
css-小三角
puhuihui的博客
03-24 112
文章目录css小三角效果图代码 css小三角 效果图 代码 <!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=
css小三角
TYH的博客
04-21 464
主要用来做提示框指向箭头<style type="text/css"> * { margin:0; padding:0; } .boxc { position:absolute; width:100px; height:200p
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

K I S

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值