html - 选择子菜单项时遇到问题

Question

我很难尝试将鼠标悬停在第三个菜单链接的第三个子菜单链接上。

如果将鼠标悬停在第三个链接上，您会看到一个子菜单。从那里有另一个内部子菜单，将鼠标悬停在第二个子菜单链接上后打开。但是，当我尝试向下移动并将鼠标悬停在第三个子菜单链接上时，下拉菜单消失并且很难将鼠标悬停在第三个链接上。

*,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 demo.

Answer 1

您的导航菜单位于 codepen 演示的底部，下拉菜单当前不可见。请将您的代码笔演示更新到顶部，或者让子菜单项显示在栏上方。