css实现二级菜单

最新推荐文章于 2023-09-22 15:45:07 发布

剽悍六杯茶

最新推荐文章于 2023-09-22 15:45:07 发布

阅读量709

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/nikita1995/article/details/52071040

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何利用HTML和CSS来实现一个功能完善的二级菜单。通过CSS样式控制，实现了菜单项的鼠标悬停效果以及下拉子菜单的显示与隐藏，详细讲解了相关CSS选择器和布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<!DOCTYPE html>
<html>
    <head>
        <title>微大学实训</title>

        <!-- 编码格式 -->
        <meta charset="utf-8">

        <!-- 设置SEO关键字 -->
        <meta name="keywords" content="微大学,武汉微大学">
        <meta name="description" content="实训html,css,javascript">

        <!-- 添加外部样式 -->
        <link rel="stylesheet" href="css/layout.css">

        <!-- 添加网站小图标 -->
        <link rel="shortcut icon" href="images/*.png">

        <style>
        /**/

        /**/

        /**/

        </style>
    </head>

    <body>
        <!-- 一级菜单 -->
        <div class="menu">
            <ul>
                <li><a href="">首页</a>
                    <!-- <ul>
                        <li><a href="">2015</a></li>
                        <li><a href="">2016</a></li>
                        <li><a href="">2017</a></li>
                    </ul> -->
                </li>
                <li><a href="">比赛视频</a>
                    <ul>
                        <li><a href="">2015</a></li>
                        <li><a href="">2016</a></li>
                        <li><a href="">2017</a></li>
                    </ul>
                </li>
                <li><a href="">论坛</a></li>
            </ul>
        </div>
        <!--  -->

        <!--  -->
    </body>
</html>

css样式

*{
    margin:0;
    padding:0;
    }

ul{list-style:none;}

a{
    display:block;
    width:100px;
    text-decoration: none;
    color:#000;
}
/*a:hover伊获取焦点的方式进行，不能二级菜单连续形成鼠标划上的效果*/
a:hover{
    color:#fff;
    background-color: #666;
}

.menu{
    background-color:#eee;
    width:362px;
    height:40px;
}


/*一级菜单和二级菜单的显示*/
.menu ul li{
    line-height: 40px;
    text-align: center;
    float:left;
    position:relative;/*绝对定位之后设置相对定位*/
}
.menu ul li ul{
    display:none;
    position:absolute;
}


/*二级菜单的显示*/
.menu ul li ul li a{
    background-color:#eee;
}
.menu ul li ul li a:hover{
    color:#FFF;
    background-color:#666;
}


/*鼠标划上一级菜单显示二级菜单*/
.menu ul li:hover ul{
    display:block;
}