css利用inline或者float实现导航栏以及用js实现三角形的移入移出消失！

本文链接：https://blog.csdn.net/weixin_53415999/article/details/132277210

css利用inline或者float实现导航栏以及用js实现三角形的移入移出消失！

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            *{margin:0;padding:0;}
        ul{list-style:none;}
        .c{background-color:green;height:40px;}
        li{margin:0 10px;display:inline;margin-left:20px;color:#fff;font-weight:bold;font-size:14px;
            height:25px;line-height:40px;padding:0 5px;cursor:pointer;position:relative;}
        li:hover{color:#f40;}
        .triangle {
            position: absolute;
            bottom: -11px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
            display: none;
        }
        </style>
    </head>
    <body>

    <ul type="circle" class="c">
        <li>首页<span class="triangle"></span></li>
        <li>菜鸟工具<span class="triangle"></span></li>
        <li>菜鸟笔记<span class="triangle"></span></li>
        <li>参考手册<span class="triangle"></span></li>
        <li>菜鸟工具<span class="triangle"></span></li>
        <li>用户笔记<span class="triangle"></span></li>
        <li>测验/考试<span class="triangle"></span></li>
        <li>本地书签<span class="triangle"></span></li>
    </ul>


    <script>
        var li = document.querySelectorAll("li");//li必须是可迭代的
         li.forEach(
         function(item) {
            var triangle = item.querySelector(".triangle");//鼠标移入事件
            item.addEventListener("mouseenter", function() {
                triangle.style.display = "block";
         });

        item.addEventListener("mouseleave", function() {//鼠标移出事件
            triangle.style.display = "none";
        });
    });
    </script>
    </body>
</html>