js实现导航栏鼠标悬浮弹出可选菜单

一、html
1、分别设置父标签、子标签的类a1、b1
2、设置父级position为relative,
设置子级：
position: absolute;
z-index:99999; 防止盒子被覆盖
display: none; 默认不显示
white-space: nowrap; 保证子级宽度不超过父级宽度

            <td class="a1">
                <a href="https://item.rakuten.co.jp/genhigh/js2/"><img style="width:100%;" src="imgs/new/nav/car.png">
                </a>
                <div class="row b1"
                    style="position: absolute;z-index:99999;display: none;left:1.6%;right:1.6%;white-space: nowrap;">
                    <div style="border: 1px solid grey;width: 33.3%;"><a
                            href="https://item.rakuten.co.jp/genhigh/js1/"><img style="width: 100%;height: 100%;"
                                src="imgs/new/menu/JS1.png"></a></div>
                    <div style="border: 1px solid grey;width: 33.3%;"><a
                            href="https://item.rakuten.co.jp/genhigh/js2/"><img style="width: 100%;"
                                src="imgs/new/menu/JS2.png"></a></div>
                    <div style="border: 1px solid grey;width: 33.3%;"><a
                            href="https://item.rakuten.co.jp/genhigh/js2lite/"><img style="width: 100%;height: 100%;"
                                src="imgs/new/menu/JS2 LITE.png"></a></div>
                </div>
            </td>

二、js

    $(".a1").hover(    
        function () {            //鼠标移动到父标签触发
            $(".b1").show(); //显示
        },
        function () {           //鼠标移动到父标签触发
            $(".b1").hide();  //隐藏
        },
    )

具体效果如下图：

Lark20201207-155125.png