做这个东西的出发点很简单，就是把做过的东西

这件事的出发点很简单。就是把做过的事情封装起来易语言组件代码编辑框指示器易语言组件代码编辑框指示器，写博客，记录下来。项目需要使用后，直接使用即可。方法很简单。如果你不喜欢它，不要喷它。拿去试试。

直接编码

html部分：

    

        
首页
        
产品中心
        
服务中心
        
联系我们
        
集团信息
    

CSS样式部分：

.ul{
            width: 700px;
            height: 80px;
            margin:20px auto;
            border-top:1px solid red;
            border-bottom:1px solid red;
        }
        .ul ul{
            width: 100%;
            height: 100%;
        }
        .ul ul li{
            width: 18%;
            height: 80px;
            float: left;
            list-style: none;
            padding: 0 1%;
        }
        .ul ul li a{
            display: block;
            height: 100%;
            color: #333;
            text-align: center;
            line-height: 80px;
            text-decoration: none;
            position: relative;
        }
        .ul ul li a:before{
            content: "";
            width: 0;
            height: 0;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-bottom: 12px solid red;
            position: absolute;
            left: 18%;
            bottom: 0;
            opacity: 0;
        }
        .ul ul li a:after{
            content: "";
            width: 0;
            height: 0;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-top: 12px solid red;
            position: absolute;
            left: 18%;
            top: 0;
            opacity: 0;
        }
        .ul ul li:hover a:before{
            opacity: 1;
        }
        .ul ul li:hover a:after{
            opacity: 1;
        }

效果图：

默认状态：

选定状态：

到此结束，简单粗暴，通俗易懂！