_____时光如故丶 2020-07-03 15:05 采纳率: 100%
浏览 1609
已采纳

二级菜单的子菜单点击高亮的同时其对应的父级菜单也呈现高亮。

# 被一个导航的问题困住了,大体如下。

一个主页导航栏,其对应的导航栏有下拉菜单,部分没有。没有下拉菜单的可以
直接点击跳转到相应的页面,此时当前一级菜单航栏字体为选中颜色,当选择别的下
图片说明

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

<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style>
        .con-1200 {
            width: 1200px;
            margin: 0 auto;
        }

        .header {
            position: fixed;
            width: 100%;
            background: white;
            box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5);
            z-index: 99999;
        }

        .header header {
            height: 80px;
            line-height: 80px;
            width: 1200px;
            margin: 0 auto;
        }

        .header header .logo {
            height: 26px;
            display: block;
            margin-top: 26px;
        }

        .header header .nav-p li {
            float: left;
            position: relative;
            text-align: center;
            margin-right: 14px;
            width: 95px;
        }

        .header header .nav-p li:hover .nav-c {
            display: block;
        }

        .header header .nav-p li .nav-p-link {
            display: block;
            font-size: 14px;
            position: relative;
        }

        .header header .nav-p li .nav-p-link:hover:after {
            transform: scaleX(1);
            transform-origin: left;
        }

        .header header .nav-p li .nav-p-link:after {
            transform: scaleX(0);
            -webkit-transform: scaleX(0);
            transition: transform .5s ease, -webkit-transform .5s ease;
            -webkit-transform-origin: right;
            -ms-transform-origin: right;
            transform-origin: right;
            display: block;
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 2px;
            background-color: #1890FF;
        }

        .header header .nav-p li .nav-c {
            z-index: 10;
            display: none;
            position: absolute;
            top: 81px;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            width: 92px;
            background-color: #fff;
            padding: 10px 0;
            border-radius: 0 0 4px 4px;
            border: 0 solid rgba(31, 50, 82, 0.16);
            box-shadow: 0 3px 6px 0 rgba(97, 103, 113, 0.2);
        }

        .header header .nav-p li .nav-c .nav-c-link {
            display: block;
            font-size: 14px;
            line-height: 42px;
        }

        .header header .nav-p li .nav-c .nav-c-link:hover {
            color: #1890FF;
        }

        *:before,
        *:after {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body,
        div,
        span,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        address,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        samp,
        small,
        strong,
        sub,
        sup,
        var,
        b,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td {
            border: 0 none;
            font-size: inherit;
            color: inherit;
            margin: 0;
            padding: 0;
            vertical-align: baseline;
            max-height: 100000px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
            font-family: PingFangSC-Medium, PingFang SC;
        }

        p {
            font-family: PingFangSC-Regular, PingFang SC;
        }

        em,
        strong,
        b,
        i,
        em {
            font-style: normal;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        body {
            color: #353535;
        }

        a {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        input {
            -webkit-user-select: text !important;
        }

        a:hover {
            text-decoration: none;
        }

        input,
        button {
            outline: none;
        }

        .lf {
            float: left;
        }

        .rt {
            float: right;
        }

        .cf:after {
            content: "";
            display: table;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <!--header-->
    <div class="header">
        <header class="con-1200">
            <ul class="rt nav-p">
                <li>
                    <a class="nav-p-link" href="">一级菜单</a>
                </li>
                <li>
                    <a class="nav-p-link" href="JavaScript:void(0)">一级菜单</a>
                    <div class="nav-c">
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                    </div>
                </li>
                <li>
                    <a class="nav-p-link" href="JavaScript:void(0)">一级菜单</a>
                    <div class="nav-c" style="width: 125px;">
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                    </div>
                </li>
                <li>
                    <a class="nav-p-link" href="">一级菜单</a>
                </li>
                <li>
                    <a class="nav-p-link" href="JavaScript:void(0)">一级菜单</a>
                    <div class="nav-c">
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                        <a class="nav-c-link" href="">二级菜单</a>
                    </div>
                </li>
                <li>
                    <a class="nav-p-link" href="">一级菜单</a>
                </li>
            </ul>
        </header>
    </div>

</body>
</html>
  • 写回答

2条回答 默认 最新

  • 封印di恶魔 2020-07-03 15:44
    关注

    给一级菜单添加id
    给二级菜单添加attr,parent-id属性
    然后给二级菜单添加hover事件,方法体内获取当前节点,然后获取attr中的parent-id属性,然后用id选择器获取一级菜单节点
    然后给一级菜单节点添加高亮样式

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥200 如何使用postGis实现最短领规划?
  • ¥15 pyinstaller打包错误
  • ¥20 cesm的气溶胶排放文件
  • ¥15 逐月累计,月份不连续,补齐月份
  • ¥15 应用简单的Python代码完成一个学生成绩管理系统
  • ¥15 用matlab求微分方程初值问题
  • ¥15 vscode下编写第三方库opencv与pcl代码时没有代码提示
  • ¥15 能够跑通不报错,如何解决?(标签-matlab)
  • ¥15 MOS在RDS较大,频率高时开关波形异常
  • ¥15 SCENIC分析报错求解答