CSS导航子菜单布局优化：解决悬停时主导航推移问题

ul li ul {
    visibility: hidden;
    opacity: 0;
    position: relative; /* 问题所在：仍占据空间 */
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none; /* 切换时导致布局推移 */
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block; /* 切换时导致布局推移 */
  position: relative; /* 问题所在：可能与绝对定位冲突或造成不预期行为 */
}

<div class="header">
    <div id="logo"></div>
    <div id="nav">
        <ul>
            <li><a href="about.html">About</a>
                <ul>
                    <li><a href="vision.html">Our Vision</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="something.html">Something</a></li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Projects</a>
                <ul>
                    <li><a href="#">Project A</a></li>
                    <li><a href="#">Project B</a></li>
                    <li><a href="#">Project C</a></li>
                    <li><a href="#">Project D</a></li>
                    <li><a href="#">Project E</a></li>
                </ul>
            </li>
            <li><a href="careers.html">Careers</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div><!-- end nav -->
    <img class="header" />
    <div class="header-box">
        <p style="font-size: 2em; font-weight: bold">Heading</p>
        <p style="font-size: 1.5em">Subheading</p>
    </div><!-- end box-->
</div><!-- end header -->

#nav {
  float: right;
  padding-top: 30px;
  padding-right: 30px;
}

#nav li {
  display: inline; /* 使主导航项水平排列 */
  float: left; /* 配合display: inline实现浮动 */
  padding-left: 30px;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: medium;
  /* 为子菜单的绝对定位提供上下文 */
  position: relative; 
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: black;
}

#nav a {
  color: black;
  /* font-size: 10px; 示例调整 */
}

#nav a:hover {
  color: black;
}

/* 子菜单的默认状态 */
ul li ul {
  visibility: hidden; /* 默认隐藏 */
  opacity: 0; /* 默认完全透明 */
  position: absolute; /* 核心：脱离文档流，不再占据空间 */
  transition: all 0.5s ease; /* 平滑过渡效果 */
  margin-top: 1rem; /* 调整子菜单与主菜单的垂直间距 */
  pointer-events: none; /* 隐藏时禁用鼠标事件 */
  /* left: 0; 如果需要子菜单与父菜单左对齐 */
  /* top: 100%; 如果需要子菜单紧贴父菜单下方 */
  min-width: max-content; /* 确保子菜单内容完整显示 */
  background-color: #f9f9f9; /* 示例背景色 */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* 示例阴影 */
  z-index: 1; /* 确保子菜单在其他内容之上 */
  padding: 10px 0; /* 示例内边距 */
}

/* 子菜单项的样式 */
ul li ul li {
  clear: both; /* 清除浮动，使子菜单项垂直排列 */
  float: none; /* 取消子菜单项的浮动 */
  display: block; /* 确保子菜单项独占一行 */
  padding: 5px 15px; /* 示例内边距 */
  text-transform: none; /* 子菜单项不需要大写 */
  font-weight: normal; /* 子菜单项不需要粗体 */
  font-size: small; /* 示例字体大小 */
}

ul li ul li a {
    color: #333;
    display: block; /* 链接填充整个子菜单项区域 */
    text-decoration: none;
}

ul li ul li a:hover {
    background-color: #ddd;
}

/* 鼠标悬停时子菜单的显示状态 */
ul li:hover > ul,
ul li ul:hover {
  visibility: visible; /* 显示子菜单 */
  opacity: 1; /* 完全不透明 */
  pointer-events: all; /* 启用鼠标事件 */
  /* 移除原先的 position: relative; 和 display: block; */
}