Alexander Lashchevsky

Возможно вам нужно обновить версию бутстрапа, так как justify-content-end (который нужно прописывать вместе d-flex у col-xl-7) появился в Bootstrap 4 не сразу, возможно у вас версия которая пока его не поддерживает.

Чтобы контролировать родительский, используйте closest.

Пример:

$('дочерний').hover(function() {
    // Действия, когда мышка навелась на дочерний элемент
    $(this).closest('.родитель').вашидействия();
}, function() {
    // Действия, когда мышка ушла с дочернего элемента
	$(this).closest('.родитель').вашидействия();
});

А почему бы просто не обернуть подменю в дополнительный контейнер, которому указать padding-top: 10px;

jsfiddle.net/Lashchevsky/ge824sjp/1

Всё очень просто.
Вы каким-то непонятным образом позиционируете блоки. Например, padding: 400px; у #content.

Попробуйте с нуля переверстать с учётом последовательности блоков.

Блок #content у Вас нализает поверх всех остальных, т.е. все ссылки оказываются как бы под ним. Из-за этого Вы не можете на них нажать, так как он под ним и когда вы наводите/кликаете, вы кликаете не по ним, а по этому #content.

Это сброс стандартных CSS настроек браузера.

По умолчанию браузер добавляет отступы для некоторых блоков. Например, если вы сделаете таблицу на ширину в 100% внутри тега body, она не будет на всю ширину окна браузера без использования этого CSS правила, так как для body браузеры подставляют отступы.

А звёздочка, как уже вверено подметили, заменяет собой все элементы. Чтобы их не перечислять, просто используют звездочку.