鼠标悬停时调整Div宽度以显示子菜单的技术咨询

Got it, let's get this menu behavior working exactly how you want it. The main issue with your original code is the nested submenu structure and missing width transition logic for the main menu. Here's the fixed version with clear explanations:

Step 1: Adjust the HTML Structure #

First, we'll move the submenu to be a sibling of the main menu instead of a child. This lets them sit side-by-side naturally when the main menu shrinks:

<div class="left">
  <div class="itemMenu">
    <span>Menu</span>
  </div>
  <div class="itemSubmenu"></div>
</div>

Step 2: Updated CSS #

We'll refine the flex layout, add smooth animations, and use sibling selectors to trigger the submenu display at the right time:

/* Variables */
:root {
  --Gray: #323a3a;
  --DarkBlue: #123B79;
  --LightBlue: #18A5A7;
  --LightGray: #D9D9D9;
  --White: white;
}
/* Body tools */
body {
  margin: 0 auto;
  user-select: none;
  overflow: hidden;
  background-color: black;
}
/* Container */
.container {
  display: flex;
  flex-direction: row;
  position: fixed;
  width: 100%;
  height: 100%;
}
/* Left DIV */
.left {
  display: flex;
  flex-direction: row;
  width: 20%;
  border: 3px solid green;
  overflow: hidden; /* Prevent submenu from spilling outside the container */
}
.itemMenu {
  text-align: center;
  height: 100%;
  width: 100%;
  background-color: var(--Gray);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease; /* Smooth width shrink animation */
  cursor: pointer; /* Show pointer to indicate interactivity */
}
.itemMenu span {
  color: white;
  font-size: 30px;
}
.itemSubmenu {
  display: none;
  height: 100%;
  width: 100%; /* Match main menu's original width to fill the remaining space */
  background-color: white;
}
/* Trigger width change and submenu display on hover */
.itemMenu:hover {
  width: 50%; /* Shrink main menu to 50% of the left container's width */
}
.itemMenu:hover + .itemSubmenu {
  display: block; /* Show the adjacent submenu when hovering the main menu */
}
/* Right DIV */
.right {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.content {
  width: 100%;
  height: 70%;
  background-color: var(--Gray);
  border: 5px solid yellow;
}
.bottom {
  width: 100%;
  height: 30%;
  background-color: var(--DarkBlue);
  border: 10px solid red;
}

Key Changes Explained: #

• Sibling Submenu: Moving .itemSubmenu to be a sibling of .itemMenu lets them share the flex space in the left container, so the submenu can appear right next to the shrunk main menu.
• Smooth Transition: The transition: width 0.3s ease property makes the main menu's width change feel natural instead of abrupt.
• Sibling Selector: Using .itemMenu:hover + .itemSubmenu ensures the submenu only shows when you hover the main menu, targeting the adjacent submenu element directly.
• Overflow Hidden: Added to .left to keep the submenu contained within the left panel when it's displayed.

Now when you hover over the main menu, it'll smoothly shrink to 50% of the left container's width, and the white submenu will appear immediately next to it.

内容的提问来源于stack exchange，提问作者Paulo Paiva