iBird Rose

лучше вместо span использовать input text. чтобы человек руками тоже мог ввести количество. а так в остальном да. все правильно. все так и делается.

потому что блок не внутри ссылки, а ниже в DOM. в общем сделай ховер так .user-bar__active:hover + .user-bar__drop-list {
или так
.user-bar__active:hover ~ .user-bar__drop-list {

такой код будет правильнее:

<div class="container">
   <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8">
                    <div class="wr">test</div>
                </div>

                <div class="col-md-4">
                    <div class="wr">test</div>
                </div>
            </div>
        </div>
    </div>
</div>

.wr {padding-left: 30px; padding-right: 30px;}

во-первых у тебя ошибка в css .center {marginE:0px auto;}
ты не сможешь отцентрировать float:left элементы внутри блока. ну а если все же хочешь чтобы были отцентрированы, то верстай через inline-block; к примеру так:
https://jsfiddle.net/xsd5fveg/1/

спрашивай у дизайнера. тут порой не угадаешь. как то верстал сайт, а он оказывается должен был быть не по середине, а прилеплен к левому краю, при ширине сайта 1200)

$(window).scroll(function() {
	if ( $(this).scrollTop() > $('твой_якорь').offset().top ) {
		$('блок который нужно скрыть').css('display', 'none');
	} else {
		$('блок который нужно скрыть').css('display', 'block');
	}
});

ну тк ты сам задал для него

#bs-example-navbar-collapse-1 {
    display: inline-block!important;

вот оно у тебя всегда и показывается

share42.com/ru
https://tech.yandex.ru/share/

$(document).on('click', '.change_cetegory', function(e){

Как создать вложенность ссылок?

никак. нельзя вкладывать ссылки в ссылки.
правильная структура должна быть такой в вашем случае: https://jsfiddle.net/pL7e51h1/2/