纯css实现分类导航效果

最新推荐文章于 2024-07-23 21:45:47 发布

su_donglin

最新推荐文章于 2024-07-23 21:45:47 发布

阅读量1.8k

点赞数

分类专栏： web前端，css

本文链接：https://blog.csdn.net/su_donglin/article/details/62887961

版权

本文介绍了如何在不使用JavaScript的情况下，利用CSS的hover选择器和display属性创建二级菜单的悬浮层效果。通过设置display:none和display:block来控制二级菜单的显示和隐藏。同时，通过调整z-index确保悬浮层的正确显示。示例代码中展示了如何使用CSS实现背景颜色、宽度、高度的变化以及浮动和定位效果。

摘要由CSDN通过智能技术生成

在不使用js的情况下，悬浮层效果使用hover选择器实现。二级菜单平常设定为display：none;在触发一级菜单时显示一级菜单display:block。另外巧用空白块实现如下图效果：输入图片说明具体代码如下： .topmenu li:hover span{ background:white; width:20px; height:30px; display:inline-block; position:relative; float:right; z-index: 5; } 另外一个重点就是使用z-index属性，正确显示悬浮层。z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,如果之前的一级目录设置为3，像之后的二级目录的z-index就设置为4了。

.html代码

`<!DOCTYPE HTML>
<html>
    <head>
    <meta charest="utf-8">
    <title>商城分类导航效果</title>
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/nav.css">
    </head>
    <body>
        <ul class="topmenu">
            <div class="toptitle">全部商品分类</div>
            <li><a href="#">图书、音像、数字商品</a><span></span>
                <div class="submenu">
                    <dl>
                        <dt><a href="#">电子书</a></dt>
                        <dd>
                            <a href="#">免费</a>