li滑动时下划线有小三角效果

最新推荐文章于 2022-01-30 21:45:44 发布

weixin_30457881

最新推荐文章于 2022-01-30 21:45:44 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/dfbb/p/10179234.html

版权

效果中需要用到下滑小三角时效果如图:

代码如下:

样式代码:

<style>
    .body{
        width: 500px;
        height: 500px;
        margin: 0 auto;
    }
    ul li{
        float: left;
        list-style: none;
        margin: 5px;
    }
    .sub a:hover{
        color: #cd0000;
        border-bottom: 2px solid #cd0000;
    }
    .sub a:hover span{
        overflow: hidden;
        position: absolute;
        width: 0px;
        height: 0px;
        background: transparent;
        border-top: 7px solid #cd0000;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid transparent;
        margin-left: -40px;
        margin-top: 23px;
    }
</style>
body代码:

<div class="body">
    <ul>
        <li class="sub"><a>教育训练<span class="anotch"> </span></a></li>
        <li class="sub"><a>机关党建<span class="anotch"> </span></a></li>
        <li class="sub"><a>今日要闻<span class="anotch"> </span></a></li>
    </ul>
</div>
根据不同的位置调整margin就可以实现想要的小三角效果了

转载于:https://www.cnblogs.com/dfbb/p/10179234.html