Выпадающее меню пропадает при наведении

Общее
1

Добрый день.
Подскажите пожалуйста - почему пропадает выпадающее меню как только смещаю курсор мыши с родительского li?

HTML

CSS

ul{
	list-style-type: none;
margin:0;
padding:0;
}

ul.menu_top{
	position: relative;
	margin-top: 20px;
	padding-left: 50px;

}

ul.menu_top > li{
position: relative;
display: inline-block;
margin-right: 10px;
padding: 13px;
white-space: nowrap;
}
ul.menu_top li:first-child:hover{
border-radius: 15px 15px 0 0;
}
ul.menu_top li:hover{
background-color: #fcff19;
cursor: pointer;
border-radius: 15px;
}

ul.menu_top li:hover a{
  color:#000000;
}

.menu_top > li:hover .sub-menu,
.menu_top > li:hover .sub-menu li {
visibility: visible;
}

nav a{
font-family: ‘robotobold’;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
}

nav a:hover{
text-decoration: none;
color: #000000;
}
nav a:active{
text-decoration: none;
color: #000000;
}
nav a:focus{
text-decoration: none;
color: #000000;
outline: none;
}

ul.sub-menu{
	position: absolute;
	top: 40px;
	left: 0;
	padding-top: 5px;
	width: 220px;
	background-color: #fcff19;
	border-radius: 0 15px 15px 15px;
	visibility: hidden;
  }

 ul.sub-menu li{
	color:#000000;
	padding: 10px 14px;
  }
2

По-моему это ожидаемое поведение.
А вы как хотите?
Воспользуйтесь песочницей для демонстрации кода. Например, http://codepen.io/

3

вот ссылка
https://codepen.io/AleksanderZ/pen/YVVpmg

но дело в том что когда я кусок кода вынес на код пен - там перестало подменю пропадать когда я на него навожу, а в коде у меня в редакторе так же само все прописано - но пропадает… не могу понять почему

Я сделал красный фон у меню, так как у меня картинка на background стоит в коде а пункты меню белого цвета по макету

и я понимаю что это ожидаемо когда убираешь курсор с родительского li куда-то в сторону, но подменю по логике не должно пропадать когда ты просто спускаешься вниз на выпавшее меню, оно должно оставаться видимым, а у меня оно пропадает…

4

Давайте весь код посмотрим тогда. Возможно, есть правила, которые конфликтуют.

5

я использую бутстрап в этом макете, может мне лучше Вам на почту архив скинуть?

6

А вы бутстрап локально подключаете? Можно для песочницы подключить через cdn https://www.bootstrapcdn.com/

7

http://codepen.io/AleksanderZ/pen/YVVpmg

посмотрите сейчас, понимаю что получилась какая-то каша, но зато видно как пропадает подменю, когда наведете на BICYCLES и начнете спускаться внизу - увидите

8

Увидела… И источник проблемы нашла. Это как раз bootstrap.

Снимок экрана от 2017-04-30 17-36-02.png1366×768 139 KB

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

9

а что с этой сторокой делать,
это же прописано в самом бутстрапе , разве можно что-то в нем менять? даже если уберу, где-то это свойство может понадобиться ведь…
как решить этот вопрос с меню?

10 
div.line-header > div.col-md-6 {
	position: static;
}

если такое прописать для того бутстраповского класса, будет правильно?

11

В данном случае вы можете использовать !important. И задать position: static; для своего класса - .line-header.

12

А это не повлеяет в дальнейшем на адаптивность? Так как у меня этот класс отвечает за отступ от верхнего окна браузера

13

А вы отступ сверху делаете с помощью координаты позиционирования?

14 
div.line-header {
	position: static !important;
	margin-top:20px;
}

вот так

15

И каким образом связаны два свойства? static - это состояние любого блока по умолчанию. !important вы дописываете, чтобы библиотека не могла это свойство переопределить.

16

а куда тогда important дописывать?
я понимаю что по умолчанию, просто я не знаю куда тогда это импортант прописать)

17

Вы уже написали. Я как раз это и имею в виду. Разве не работает? (правда сейчас не могу проверить сама)

18

я прописал так как Вам скидывал

div.line-header { position: static !important; margin-top:20px; }

но ничего не изменилось…так же пропадает подменю

19

Сейчас не могу посмотреть. Примерно через час будет доступ к компьютеру, тогда гляну, если за это время больше никто не подключится к теме.

20

без проблем, спасибо, я подожду