如何将导航栏移至页面左侧并使其余内容并列显示

第一步：修正HTML语义化问题 #

原HTML存在<a>直接包裹<li>的不规范写法，先调整结构：

<nav role="navigation" class="navbar">
  <ul>
    <li><a href={{ url_for('index') }}>Tools</a></li>
    <li><a href={{ url_for('certification') }}>Certification</a></li>
    <li>
      <a href="#">Application1</a>
      <ul class="dropdown">
        <li><a href={{ url_for('accessing') }}>Access</a></li>
        <li><a href={{ url_for('loading_maintenance') }}>Maintenance</a></li>
        <li><a href={{ url_for('summary') }}>Summary</a></li>
        <li><a href={{ url_for('loading_report') }}>Report</a></li>
      </ul>
    </li>
    <li class="disabled">Application2
      <!-- <ul class="dropdown">
        <li><a href="#">How to access</a></li>
        <li><a href="#">Summary</a></li>
      </ul> -->
    </li>
    <li><a href={{ url_for('application3') }}>Application3</a></li>
  </ul>
</nav>

<!-- 主内容区容器 -->
<main class="main-content">
  <!-- 页面内容写在这里 -->
</main>

第二步：修改CSS实现左侧布局 #

调整导航为垂直方向，设置页面整体布局让导航与主内容并排：

/* 页面全局布局：让导航和主内容横向排列 */
body {
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
}

/* 左侧导航栏基础样式 */
.navbar {
  width: 220px;
  background: #006ac3;
  height: 100vh;
}

.navbar ul {
  background: #006ac3;
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  width: 100%;
  height: 100%;
}

.navbar li {
  color: #fff;
  background: #006ac3;
  display: block;
  padding: 1rem;
  position: relative;
  transition-duration: 0.5s;
  text-align: center;
  font-size: 20px;
}

.navbar li a {
  color: #fff;
  text-decoration: none;
  display: block; /* 让点击区域覆盖整个li */
}

.navbar li:hover,
.navbar li:focus-within {
  background: #ffc72c;
  cursor: pointer;
}

.navbar li:focus-within a {
  outline: none;
}

/* 下拉菜单位置调整：显示在主菜单右侧 */
.navbar ul li ul {
  background: #006ac3;
  visibility: hidden;
  opacity: 0;
  min-width: 180px;
  position: absolute;
  transition: all 0.5s ease;
  top: 0; /* 与主菜单顶部对齐 */
  left: 100%; /* 显示在主菜单右侧 */
  display: none;
  margin-top: 0;
}

.navbar ul li:hover > ul,
.navbar ul li:focus-within > ul,
.navbar ul li ul:hover,
.navbar ul li ul:focus {
  visibility: visible;
  opacity: 1;
  display: block
}

.navbar ul li ul li {
  clear: both;
  width: 100%;
}

.dropdown li {
  text-align: left;
}

/* 主内容区：占满剩余页面宽度 */
.main-content {
  flex: 1;
  padding: 2rem;
}

关键修改说明 #

1. 页面全局flex布局：给body添加display:flex，确保导航栏和主内容区横向排列，避免主内容被挤到导航下方。
2. 导航垂直化：将.navbar ul的flex-direction设为column，把横向导航改为垂直布局，同时固定导航栏宽度、设置全屏高度。
3. 下拉菜单适配：调整下拉菜单的left:100%和top:0，让下拉菜单显示在主菜单右侧，符合左侧导航的交互逻辑。
4. 语义化修正：将<a>包裹<li>的错误结构改为<li>包裹<a>，符合HTML规范并提升可访问性。

内容的提问来源于stack exchange，提问作者Vrunda Hingarajiya