Возникли проблемы с выбором пункта подменю

#html #css #menu

#HTML #css #меню

Вопрос:

Мне трудно навести курсор на ссылку 3-го подменю из ссылки 3-го меню.

Если вы наведете курсор на 3-ю ссылку, вы получите подменю. Оттуда есть еще одно внутреннее подменю, которое открывается после наведения курсора мыши на ссылку 2-го подменю. Однако, когда я пытаюсь спуститься и навести курсор на ссылку 3-го подменю, выпадающий список исчезает, и становится трудно навести курсор на эту 3-ю ссылку.

 *,body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
  font-family: 'Open Sans Condensed';
  background-color: white;
}
.wrapper{
  width: 960px;
  height: auto;
  margin: 0 auto;
  margin-top: 150px;
  box-shadow: 4px 0px 25px 0px rgba(0,0,0,0.75);
}
.header-bot-links{
  width: 100%;
  height: 40px;

  position: absolute;
  bottom: 0;
  left: 0;
  top: 460px;

  border: 1px solid black;
  text-align: center;

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;

  font-weight: 700;
  font-size: 18px;
}
.link{
  width: 100%;
  height: 100%;
  color: black;
  text-decoration: none;
  padding-top: 9px;
  transition: .5s color,
    .5s background-color;
}
.link:nth-child(2){
  border-left: 1px solid black;
}
.link:nth-child(2),
.link:nth-child(3),
.link:nth-child(4){
  border-right: 1px solid black;
}
.link:hover{
  background-color: #333;
  color: white;
  text-decoration: none;
}
.glyphicon{
  position: absolute;
  top:13px;
}
.glyphicon-menu-left{
  left: 20px;
}
.glyphicon-menu-right{
  right: 20px;
}
.sub-menu,
.in-sub-menu{
  display: none;
  list-style-type: none;
  color: black;
  margin: 0;
  padding: 0;
  transition: 1s all;
}
.link3:hover .sub-menu{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid blue;
}
.sub-menu-item{
  padding: 10px 0 10px 0;
  transition: 1s all;
}
.sub-menu-item:hover{
  background-color: lightblue;
  border-bottom: 1px solid black;
}
.sub-menu-item:nth-child(1){
  border-bottom: 1px solid black;
}
.sub-menu-item:nth-child(3){
  border-top: 1px solid black;	
}
.sub2:hover{
  padding: 10px 0 0 0;
}
.sub2:hover .in-sub-menu{
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}
.in-sub-menu-item{
  padding: 10px 0 10px 0;
  transition: 1s all;
}
.in-sub-menu-item:hover{
  background-color: tomato;
}

 <div class="wrapper">
		<div class="header-bot-links">
			<a href="#" class="link">
				<span class="glyphicon glyphicon-menu-left"></span>Link 1
			</a>
			<a href="#out" class="link">
				Link 2
			</a>
			<a href="#rest" class="link link3">
				Link 3

				<ul class="sub-menu">
					<li class="sub-menu-item">Sub Menu Item 1</li>

					<li class="sub-menu-item sub2">Sub Menu Item 2
						<ul class="in-sub-menu">
							<li class="in-sub-menu-item">TEST </li>
							<li class="in-sub-menu-item">TEST 2</li>
							<li class="in-sub-menu-item">TEST 3</li>
						</ul>
					</li>

					<li class="sub-menu-item">Sub Menu Item 3</li>
				</ul>
			</a>
			<a href="#night" class="link">
				Link 4
			</a>
			<a href="#" class="link">
				Link 5<span class="glyphicon glyphicon-menu-right">
			</a>
		</div>
	</div>

Демонстрация Codepen.

1. Я не совсем понимаю ваш вопрос, я смог просто навести курсор на третью ссылку, хотя мне потребовалось несколько попыток. Мне приходилось прокручивать вниз, чтобы добраться до него, и часто моя мышь покидала родительский элемент и закрывала меню. Возможно, вы захотите открыть второе подменю справа, как традиционное выпадающее меню.

Ответ №1:

Ваше навигационное меню находится в нижней части демонстрации codepen, и выпадающие списки в настоящее время не видны. Пожалуйста, обновите демонстрационную версию codepen, чтобы она была вверху, или чтобы пункты подменю отображались над панелью.

1. Основная проблема с этим меню заключается в том, что пункты подменю расположены вертикально. Обычно считается лучшей практикой, чтобы каждое подменю отображалось справа от его родительского элемента. Вы можете найти пример этого здесь: bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3