CSS布局异常：段落渲染到导航栏 无法显示在紫色内容区

• 全局通配符选择器*设置的黑色背景样式写在html、body紫色背景样式之后，直接覆盖了页面紫色底色，所有页面元素被强制套用导航栏的黑色背景
• .dropdown-content样式存在语法错误：background-color属性后缺失分号，导致后续min-width属性直接失效
• HTML结构不符合规范：<ul>标签的合法直接子元素只能是<li>，当前代码将<div class="dropdown">作为ul的直接子元素包裹li，浏览器自动修正DOM结构时会引发布局错位
• 未给导航栏和正文区域设置分隔间距，正文默认从页面顶部开始渲染，直接和导航栏区域重叠

按以下步骤调整代码即可：

1. 修改全局样式规则，移除通配符选择器中强制给所有元素设置黑色背景的代码，仅给导航栏相关元素单独设置黑色背景，避免覆盖页面紫色底色：

   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     /* 删除此处的 background: #30302F; */
   }
   
   /* 单独给导航栏模块设置黑色背景 */
   header, .nav_links, .dropdown-content, .nav_links button, .nav_links a {
     background: #30302F;
   }
   

2. 修复下拉菜单的CSS语法错误，补全缺失的分号，同时调高下拉菜单的层级避免被正文遮挡：

   .dropdown-content {
     display: none;
     margin-right: 50px;
     position: absolute;
     background-color: #30302F; /* 补全属性结尾分号 */
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 10;
   }
   

3. 修正导航列表的HTML结构，将dropdown类移到li标签上，保证ul的直接子元素全部为li，避免浏览器渲染错乱：

   <nav>
     <ul class="nav_links">
       <li class="dropdown">
         <a href="#"><button class="dropbtn" id="Btn1">Lore</button></a>
         <div class="dropdown-content">
           <a href="PrimordialEra.html">The Primordial Era</a>
           <a href="#">The Dawn Era</a>
           <a href="#">The Second Era</a>
         </div>
       </li>
   
       <li class="dropdown">
         <a href="#"><button class="dropbtn" id="Btn2">Info</button></a>
         <div class="dropdown-content">
           <a href="#">Characters</a>
           <a href="#">World</a>
           <a href="#">Magic</a>
           <a href="#">Races</a>
           <a href="#">Religion</a>
           <a href="#">Gods</a>
         </div>
       </li>
   
       <li class="dropdown">
         <a href="#"><button class="dropbtn" id="Btn3">Resources</button></a>
         <div class="dropdown-content">
           <a href="#">Beastiary</a>
           <a href="#">Maps</a>
           <a href="#">War System</a>
           <a href="#">Spells List </a>
         </div>
       </li>
     </ul>
   </nav>
   

4. 给正文区域添加顶部间距和适配紫色背景的文字样式，避免和导航栏重叠：

   .P1 {
     margin-top: 60px;
     color: #ffffff;
     font-size: 20px;
   }
   

调整完成后刷新页面，正文就会正常显示在紫色的页面内容区域，不会再跑到黑色导航栏位置。

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