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>

更多推荐

HTML下拉菜单代码实现