<ul class="drop-menu-main">
        <li><a href="#news">Новости</a></li>
        <li>
            <span class="drop-down">Публикиции <span class="arrow">▼</span></span>

            <div class="drop-menu-main-sub">

                <span class="title"></span>
                <a href="#posts-new">Новые</a>
                <a href="#posts-done">Обработанные</a>
                <a href="#posts-all">Все</a>
            </div>
        </li>
        <li>
            <span class="drop-down">Тренды <span class="arrow">▼</span></span>

            <div class="drop-menu-main-sub">
                <span class="title"></span>
                <a href="#trends-sport">Спорт</a>
                <a href="#trends-creation">Творчество</a>
                <a href="#trends-humor">Юмор</a>
                <a href="#trends-fashion">Мода</a>
                <a href="#trends-economy">Экономика</a>
                <a href="#trends-science">Наука</a>
            </div>
        </li>
        <li>
            <span class="drop-down">Профиль <span class="arrow">▼</span></span>

            <div class="drop-menu-main-sub">
                <span class="title"></span>
                <a href="#questionary">Личная страница</a>
                <a href="#questionary">Анкета</a>
                <a href="#messages">Сообщения</a>
                <a href="#settings">Настройки</a>
                <a href="#signout">Выйти</a>
            </div>
        </li>
    </ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

    function hideallDropdowns() {
        $(".dropped .drop-menu-main-sub").hide();
        $(".dropped").removeClass('dropped');
        $(".dropped .drop-menu-main-sub .title").unbind("click");
    }

    function showDropdown(el) {
        var el_li = $(el).parent().addClass('dropped');
        el_li
            .find('.title')
            .click(function () {
                hideallDropdowns();
            })
            .html($(el).html());

        el_li.find('.drop-menu-main-sub').show();
    }

    $(".drop-down").click(function(){
        showDropdown(this);
    });

    $(document).mouseup(function () {
        hideallDropdowns();
    });
});
</script>

<style>
.demo ul, .demo li {
float: left;
    margin: 0;
    padding: 0;
}

.demo .drop-menu-main a, .demo .drop-down, .demo .drop-menu-main-sub .title {
    text-decoration: none;
    color: #555555;
    padding: 0 10px 0 0;
}

.demo .drop-menu-main {
    padding: 4px;
    height: 20px;
    position: relative;
}

.demo .drop-menu-main li {
    float: left;
    margin-right: 40px;
}

.demo .drop-menu-main-sub {
    display: none;
    position: absolute;
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    z-index: 100;
    width: 130px;
    padding: 5px 0 5px;
    margin: -29px 0 0 -15px;
}

.demo .drop-menu-main-sub a {
    color: #555555;
    display: block;
    font-size: 11px;
    padding: 6px 15px;
    cursor: pointer;
    text-decoration: none;
}

.demo .drop-menu-main-sub a:hover {
    background: #155FB0;
    color: #FFFFFF;
    text-decoration: none;
}

.demo .drop-menu-main-sub .title{
    display: block;
    padding: 6px 15px;
    cursor: pointer;
    border-bottom: 1px solid #DEDEDE;
}

.demo li {
    list-style: none;
    display: block;
}

.demo .drop-down {
    cursor: pointer;
}

.demo span.arrow{
    font-size: 8px;
</style>