<div>
<ul class="navul">
    <li class="navli">
        <a href="#">后端</a>
        <ul>
            <li><a>python</a></li>
            <li><a>python</a></li>
            <li><a>python</a></li>
            <li><a>python</a></li>
        </ul>
    </li>
    <li class="navli">
        <a>后端</a>
    </li>
    <li class="navli">
        <a>后端</a>
    </li>
    <li class="navli">
        <a>后端</a>
    </li>
    <li class="navadd">
        <a>+</a>
    </li>
</ul>
</div>

.navul{
    list-style: none;
}

.navul li{
    float: left;
    width: 150px;
    height: 50px;
    background: #6b778c;
    cursor: pointer;

}

.navul li:hover{
    color: red;
    background: rgba(238,82,83,1);
}

.navul li a{
    text-decoration: none;
    color: #fff;
    display: block;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

.navul li ul li{
    display: none;
    width: 220px;
    height: 50px;
    float: initial;
    background: #4a727e;
    font-size: 10px;
}

.navul li:hover ul li{
    display: block;
}