Tôi có 5 liên kết trên điều hướng dọc của tôi. Trên màn hình thay đổi kích thước nav dọc của tôi trở thành một nav ngang với ba (trong số 5 liên kết) hiển thị và một liên kết khác gọi là menu hiển thị hai liên kết còn lại còn lại.Menu phụ không hiển thị chính xác trên thay đổi kích thước màn hình (và hành vi không mong muốn)
Vì lý do nào đó, khi thay đổi kích thước màn hình, khi nội dung danh sách đã được hiển thị và sau đó khi menu được nhấp, nó sẽ rời khỏi thuộc tính di chuột ngay cả khi bạn không lơ lửng trên đó. Dưới đây là hình ảnh:
1. Trên màn hình thay đổi kích thước, nó xuất hiện như thế này:
2. Khi lơ lửng trên menu:
Đó là ĐƯỢC. Tôi chỉ muốn các liên kết xuất hiện khi liên kết menu được nhấp, không được di chuột qua. Nhưng tôi không hiểu tại sao menu nói lên hai không gian li.
3. Khi nhấp menu:
Đây là OK. Tuy nhiên, hãy lưu ý rằng Menu li hiện đã được kích thước hoàn hảo.
4. Sau khi nhấp vào menu và sau đó di chuyển chuột ra khỏi liên kết: 
Như đã đề cập, tôi không biết những gì đang gây ra những vấn đề này.
Đây là cách tiếp cận hiện tại của tôi:
$(document).ready(function() {
$(".show").click(function() {
$(".subMenu").toggleClass("active");
return false;
});
});.site-wrapper {
height: 100%;
min-height: 100%;
display: flex;
}
/* make divs appear below each other on screen resize */
@media screen and (max-width: 540px) {
.site-wrapper {
flex-direction: column;
}
}
ul.subMenu {
display: none;
}
.subMenu.active {
display: flex;
flex-direction: column;
}
li.show {
display: none;
}
.nav-container {
border-right: 1px solid #E4E2E2;
height: 100%;
width: 200px;
background-color: #f4f3f3;
}
.logo-holder {
text-align: center;
}
.nav {
text-align: justify;
}
nav:after {
content: "";
display: table;
clear: both;
}
.nav-link {
display: block;
text-align: left;
color: #333;
text-decoration: none;
margin-left: 0px;
padding-left: 15px;
}
.nav-link:hover {
background-color: #333;
color: #f4f3f3;
}
.nav ul {
width: 100%;
/* make div span div */
padding: 0px;
}
.nav ul li {
list-style-type: none;
}
.nav li:hover a {
color: #f4f3f3;
}
.active {
text-align: left;
padding-left: 15px;
text-decoration: none;
background-color: #333;
color: #f4f3f3;
}
@media screen and (max-width: 540px) {
.nav-container {
width: 100%;
height: 100px;
background-color: #f4f3f3;
border-bottom: 0.5px solid #f4f3f3;
}
.nav-link {
padding: 10px;
}
.logo-holder {
overflow: hidden;
display: block;
margin: auto;
width: 40%;
}
.nav-container nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-holder {
text-align: left;
}
#navigation-div {
background-color: #f4f3f3;
margin-top: 0;
}
.socials {
display: none;
}
.hide {
display: none;
}
.show {
display: inline-block !important;
}
.nav ul li {}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="nav-container">
<div class="logo-holder">
<img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
</div>
<div id="navigation-div">
<nav class="nav">
<ul>
<li><a class="nav-link active" href="">Test 1</a></li>
<li><a class="nav-link " href="">Test 2</a></li>
<li><a class="nav-link" href="">Test 3</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
<li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
<li class="show"><a class="nav-link" href="">Menu</a>
<ul class="subMenu">
<li><a class="nav-link" href="">Test 4</a></li>
<li><a class="nav-link" href="">Test 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
Vì vậy, bạn muốn một cái gì đó như Test 4 và Test 5 sẽ được hiển thị trên Menu chỉ nhấp chuột. Đúng? –