JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="header_menu">
    <ul class="main_menu">
        <li class="header_menu_item"><a href="http://4otaku.org/" class="link">На главную</a>

            <ul>
                <li><a href="http://raincat.4otaku.org/" title="Краткое описание ресурса" target="_blank" class="link">Кикаки</a>

                </li>
                <li><a href="http://dod.4otaku.org/" class="link">DoD-team</a>

                </li>
                <li><a href="http://alice.4otaku.org/" class="link">Randomness</a>

                </li>
                <li><a href="http://voca.4otaku.org/" class="link">VocaDome</a>

                </li>
            </ul>
        </li>
        <li class="header_menu_item current"><a href="http://4otaku.org/post/" class="link">Записи</a>

            <ul>
                <li><a href="http://4otaku.org/post/" class="link">Основной раздел</a>

                </li>
                <li class="separator"></li>
                <li><a href="http://4otaku.org/post/workshop/" class="link">Мастерская</a>

                </li>
                <li><a href="http://4otaku.org/post/flea_market/" class="link">Барахолка</a>

                </li>
                <li><a href="http://4otaku.org/post/updates/" class="link">Обновления</a>

                </li>
                <li><a href="http://4otaku.org/post/gouf/" class="link">Битые ссылки</a>

                </li>
                <li><a href="http://4otaku.org/comments/post/" class="link">Комментарии</a>

                </li>
            </ul>
        </li>
        <li class="header_menu_item"><a href="http://4otaku.org/video/" class="link">Видео</a>

            <ul>
                <li><a href="http://4otaku.org/video/" class="link">Основной раздел</a>

                </li>
                <li class="separator"></li>
                <li><a href="http://4otaku.org/video/workshop/" class="link">Премодерация</a>

                </li>
                <li><a href="http://4otaku.org/video/flea_market/"...

CSS

ul li {
    list-style-type: none;
}
ul.plain_list {
    margin: 0;
    padding: 0;
    list-style-type: none !important;
}
.header_menu {
    height: 28px;
    background: url(http://4otaku.org/images/top.png) 0px 0px repeat-x;
    position: relative;
    padding-left: 10px;
}
.header_menu ul {
    margin: 0px;
    padding: 0px;
}
.header_menu li.separator {
    border-left: 1px solid #ccc;
    display: inline-block;
    height: 10px;
    vertical-align: middle;
}
.main_menu li.header_menu_item {
    float: left;
}
.main_menu li.header_menu_item a.link, .main_menu li.header_menu_item span {
    text-shadow: 0px 0px 1px #fff;
    color: #444;
    display: block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    background: url(http://4otaku.org/images/top.png) 0px -28px repeat-x;
    text-decoration: none;
}
.main_menu li.header_menu_item_last {
    display: block;
    width: 5px;
    height: 28px;
    background: url(http://4otaku.org/images/top.png) 0px -28px repeat-x;
}
.main_menu li.header_menu_item:hover a.link, .main_menu li.header_menu_item:hover span {
    background: url(http://4otaku.org/images/top.png) 0px -56px repeat-x;
}
.main_menu li.header_menu_item.current a.link, .main_menu li.header_menu_item.current span {
    background: url(http://4otaku.org/images/top.png) 0px -84px repeat-x;
}
.main_menu li.header_menu_item a.link:hover {
    text-decoration: underline;
}
.main_menu li.header_menu_item ul {
    display: none;
    position: absolute;
    z-index: 10;
    background: #f3f3f3 url(http://subtlepatterns.com/patterns/debut_light.png);
    width: 100%;
}
.main_menu li.header_menu_item:hover ul li, .main_menu li.header_menu_item:hover ul li a.link, .main_menu li.header_menu_item:hover ul li span, .main_menu li.header_menu_item.current ul li, .main_menu li.header_menu_item.current ul li a.link, .main_menu li.header_menu_item.current ul li span {
    background: transparent;
}
.main_menu li.header_menu_item ul li {
    border-bottom:...

JavaScript

$('.header_menu_item').hover(function () {
    $('.header_menu_item').removeClass('current');
    $(this).addClass('current');
});