CSS下拉菜单设置absolute定位后hover无法显示内容问题修复

问题原因 #

• 核心冲突来自两层overflow: hidden规则：.navbar和.drop都设置了overflow: hidden，其中.navbar加该属性本来是为了清除内部浮动子元素导致的高度塌陷，.drop的该属性为冗余误写；当.drop-content设置position: absolute脱离普通文档流后，超出两个父容器高度的下拉内容会被直接裁剪，即使hover触发了显示规则，内容也被隐藏无法看到。
• 下拉菜单缺少正确的定位基准：.drop作为下拉按钮的父容器，默认是position: static定位，absolute定位的子元素会跳过它向上寻找最近的非static定位祖先，最终导致下拉菜单位置偏移，无法对齐对应按钮。
• 非absolute定位下出现导航栏被撑开的问题，是因为此时下拉菜单属于普通文档流，会占据父容器高度，直接把导航栏高度撑大。
• 附带样式问题：小屏响应式规则的选择器书写错误，规则写的是.navbar a，但实际导航包含button类型的下拉按钮，无法被该选择器命中，导致小屏下导航无法正确纵向排列。

修复步骤 #

1. 移除两处会裁剪内容的overflow属性：删除.navbar和.drop下的overflow: hidden，给.navbar添加clearfix规则清除内部浮动，既解决导航栏高度塌陷问题，又不会裁剪下拉内容。
2. 给.drop选择器添加position: relative，作为内部下拉菜单的定位基准。
3. 给.drop-content添加top: 100%; left: 0;属性，让下拉菜单刚好对齐下拉按钮的左下角，无偏移。
4. 新增下拉按钮hover样式，保证鼠标悬停在按钮上时按钮样式和其他导航项一致。
5. 修正400px宽度下的媒体查询选择器，把.navbar a改为.navbar .a, .navbar .drop, .navbar .dropbtn，同时在小屏下将.drop-content改为静态定位、宽度100%，适配移动端纵向排列的交互逻辑。
6. （规范优化）把HTML中引入CSS的<link>标签移动到<head>标签内部，符合HTML书写规范。

修复后完整代码 #

CSS代码 #

* {
    box-sizing: border-box;
  }

  body {
    font-family: 'Times New Roman', Times, serif;
    padding: 10px;
    background: #f1f1f1; 
  }

  .header {
    text-align: center;
    background-color: rgb(255, 255, 255);
    padding: 20px;
    margin-bottom: 15px;
  }
  .header h1{
    font-size: 30px; 
  }
  .navbar {
    background-color: rgb(52, 52, 52);
    position: sticky;
    top: 0;
    box-shadow: 5px 5px 10px rgba(52, 52, 52, 0.753);
  }
  /* 新增clearfix清除导航栏内部浮动 */
  .navbar:after {
    content: "";
    display: table;
    clear: both;
  }

  .drop {
    float: left;
    position: relative; /* 新增作为下拉菜单的定位基准 */
  }

  .drop .dropbtn {
    font-size: 20px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
  }


  .navbar .a {
    float: left;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 14px 16px;
    font-size:  20px;
  }


  .navbar .a:hover, .drop:hover .dropbtn {
    background-color: white;
    color: black;
  }

  .drop-content {
    display: none;
    position: absolute;
    background-color: rgb(234, 234, 234);
    min-width: 160px;
    z-index: 1;
    top: 100%; /* 贴紧按钮底部 */
    left: 0; /* 左对齐按钮 */
  }

  .drop-content .a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;

  }

  .drop:hover .drop-content {
    display: block;
  }
  
  .leftside {
    float: left;
    width: 75%;
  }
  .rightside {
    float: left;
    width: 25%;
    padding-left: 20px;
  }

  .fakeimg {
    background-color: rgb(176, 176, 176);
    width: 100%;
    padding: 20px;
  }

  div .fakeimg:hover {
    border: 1px solid black;
    cursor: pointer;
  }

  .card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .footer {
    padding: 30px;
    text-align: center;
    background-color: rgb(248, 248, 248);
    margin-top: 20px;
  }


  /* 屏宽小于800px时左右栏转为上下排列 */
  @media screen and (max-width: 800px) {
    .leftside, .rightside {   
      width: 100%;
      padding: 0;
    }
  }
  
  /* 屏宽小于400px时导航项纵向排列 */
  @media screen and (max-width: 400px) {
    .navbar .a, .navbar .drop, .navbar .dropbtn {
      float: none;
      width: 100%;
    }
    .drop-content {
      position: static;
      width: 100%;
    }
  }

HTML代码（规范调整版） #

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- CSS引用移动到head内部 -->
    <link rel="stylesheet" href="first_webpage.css">
</head>
<body>
    <div>
        <header class="header">
            <h1>First Webpage</h1>
        </header>
    </div>

    <div class="navbar">
        <a href="#" target="_self" class="a">Home</a>
        <a href="#" target="_self" class="a">Projects</a>
        <a href="#" target="_self" class="a">Contact</a>
        <div class="drop">
            <button class="dropbtn">Dropdown
                <i></i>
            </button>
                <div class="drop-content">
                    <a href="#" target="_self" class="a">Link 1</a>
                    <a href="#" target="_self" class="a">Link 2</a>
                    <a href="#" target="_self" class="a">Link 3</a>
                </div>
            
        </div>
        <a href="#" target="_self" class="a" style="float: right;">About</a>
    </div>

    <div class="row">
        <div class="leftside">
            <div class="card">
                <h2>Title One</h2>
                <h5>Description, May 31, 2022</h5>
                    <div class="fakeimg" style="height: 200px;">Image</div>
                        <figcaption>Section 1.1 City</figcaption>
                            <p>This is subsection title</p>
                                <p>This is the first paragraph of the main section.
                                This also my first webpage. It definitly looks 
                                like something from the <i><a href="https://www.nytimes.com/">
                                New York Times</a></i>. It's coming out pretty good;
                                i just need to continue taking it one step at a time.
                                Nonetheless, I will contue on with this section and 
                                not bore you. Enjoy the rest of my layout.</p>
                  
            </div>

            <div class="card">
                 <h2>Title Two</h2>
                    <h5>Description, May 31, 2022</h5>
                        <div class="fakeimg" style="height: 200px;">Image</div>
                            <figcaption>Section 1.2 Flowers</figcaption>
                                <p>This is a second section Title</p>
                                <p>This is a second paragraph, I really don't know 
                                what to write. It's not like this is an engligh 
                                101 class. i mean jesus. Talking about jesus, do 
                                you know they're making a jesus game... i mean 
                                what has the gaming industry come to?</p>   
            </div>
        </div>

        <div class="rightside">
            <div class="card">
                <h3>About Me</h3>
                    <div class="fakeimg" style="height: 100px;">Image</div>
                        <p>Some text about me so that the visiter may
                        know a bit more about the developer that they're 
                        interested in...</p>
            </div>
            
            <div class="card">
                <h3>Popular Posts</h3>
                    <div class="fakeimg"><p>Image</p></div>
                    <div class="fakeimg"><p>Image</p></div>
                    <div class="fakeimg"><p>Image</p></div>
                    <div class="fakeimg"><p>Image</p></div>
            </div>
            
            <div class="card">
                <h3>Social Media</h3>
                    <p>Some social media pages that individuals can 
                    follow me on....</p>
            </div>
            
        </div>
    </div>
    <div class="footer">
        <p>Footer</p>
    </div>
</body>
</html>

修复效果 #

• 桌面端hover下拉按钮时，下拉菜单会正常显示在按钮正下方，不会撑开导航栏高度，也不会出现位置偏移。
• 小屏（宽度小于400px）下导航项会自动纵向排列，下拉菜单会变为内嵌展开，适配移动端操作。

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