Меню №17

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
<ul class="form">
    <li>
        <a class="profile" href="#"><i class="icon-user"></i>Изменить профиль</a>
    </li>
    <li class="selected">
        <a class="messages" href="#"><i class="icon-envelope-alt"></i>Сообщения <em>5</em></a>
    </li>
    <li>
        <a class="settings" href="#"><i class="icon-cog"></i>Настройки</a>
    </li>
    <li>
        <a class="logout" href="#"><i class="icon-signout"></i>Выход</a>
    </li>
</ul>

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap");
ul.form {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    position: relative;
    background: #fff;
    width: 250px;
    margin: auto;
    padding: 0;
    list-style: none;
    overflow: hidden;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.form li a {
    width: 225px;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    color: #686868;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.form li a:hover {
    background: #efefef;
}

.form li a.profile {
    border-left: 5px solid #008747;
}

.form li a.messages {
    border-left: 5px solid #fecf54;
}

.form li a.settings {
    border-left: 5px solid #cf2130;
}

.form li a.logout {
    border-left: 5px solid #dde2d5;
}

.form li:first-child a:hover,
.form li:first-child a {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.form li:last-child a:hover,
.form li:last-child a {
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.form li a:hover i {
    color: #ea4f35;
}

.form i {
    margin-right: 15px;

    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.form em {
    font-size: 10px;
    background: #ea4f35;
    padding: 3px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-style: normal;
    color: #fff;
    margin-top: 17px;
    margin-right: 15px;
    line-height: 10px;
    height: 10px;
    float: right;
}

.form li.selected a {
    background: #efefef;
}

$("ul.form li a").click(function (e) {
    e.preventDefault();
    e.stopPropagation;
    $(this).closest("ul").find(".selected").removeClass("selected");
    $(this).parent().addClass("selected");
});