Drpdwn.css

/* Home work 4 */

.triangle_menu{
    margin-left: 80px;
}
.triangle_menu li{
    list-style: none;
    display: inline-block;
    position: relative;
}
.triangle_menu>li a{
    padding: 15px 30px;
    background: #344A5F;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    margin-right: 47px;
}

.triangle_menu>li a:hover{
    background: #FF6347;
}
.triangle_menu>li:hover>a::after{
    content: " ";
    border: 25px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: transparent;
    border-left-color: #FF6347;
    border-top-color: transparent;
    border-bottom-color: #FF6347;
    top: 0px;
    right: -50px;
}
.triangle_menu>li:hover>a::before{
    content: " ";
    border: 25px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: #FF6347;
    border-left-color: transparent;
    border-top-color: #FF6347;
    border-bottom-color: transparent;
    top: 0px;
    left: -50px;
}

.triangle_menu>li a::after{
    content: " ";
    border: 25px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: transparent;
    border-left-color: #344A5F;
    border-top-color: transparent;
    border-bottom-color: #344A5F;
    top: 0px;
    right: -50px;
}
.triangle_menu>li a::before{
    content: " ";
    border: 25px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: #344A5F;
    border-left-color: transparent;
    border-top-color: #344A5F;
    border-bottom-color: transparent;
    top: 0px;
    left: -50px;
}
.triangle_menu>li:hover .sub_menu{
    display: block;
}
.sub_menu{
    position: absolute;
    top: 36px;
    left:-20px;
    display: none;
}
.sub_menu li{
    display: block;
    position: relative;
}
.sub_menu li a{
    display: block;
    width: 150px;
    position: relative;
}
.sub_menu>li:nth-child(even) a{
    position: relative;
    left: 50px;

}
.sub_menu li a::after{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: transparent;
    border-left-color: #344A5F;
    border-top-color: #344A5F;
    border-bottom-color: transparent;
    top: 0px;
    right: -50.5px;
}
.sub_menu>li:hover>a::after{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: transparent;
    border-left-color: #FF6347;
    border-top-color: #FF6347;
    border-bottom-color: transparent;
    top: 0px;
    right: -50.5px;
}
.sub_menu li a::before{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: #344A5F;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: #344A5F;
    top: 0px;
    left: -50.5px;
}
.sub_menu>li:hover>a::before{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: #FF6347;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: #FF6347;
    top: 0px;
    left: -50.5px;
}
.sub_menu li:nth-child(even) a::after{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: transparent;
    border-left-color: #344A5F;
    border-top-color: transparent;
    border-bottom-color: #344A5F;
    top: 0px;
    right: -50.5px;
}
.sub_menu li:nth-child(even) a::before{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: #344A5F;
    border-left-color: transparent;
    border-top-color: #344A5F;
    border-bottom-color: transparent;
    top: 0px;
    left: -50.5px;
}
.sub_menu li:nth-child(even):hover a::after{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: transparent;
    border-left-color: #FF6347;
    border-top-color: transparent;
    border-bottom-color: #FF6347;
    top: 0px;
    right: -50.5px;
}
.sub_menu li:nth-child(even):hover a::before{
    content: " ";
    border: 25.5px solid #344A5F;
    display: block;
    position: absolute;
    border-right-color: #FF6347;
    border-left-color: transparent;
    border-top-color: #FF6347;
    border-bottom-color: transparent;
    top: 0px;
    left: -50.5px;
}