导航栏内悬停下拉菜单被截断问题求助

你在重新学习HTML时制作导航栏，设置鼠标悬停在Works按钮上显示下拉菜单，但目前下拉菜单仅顶部可见，其余部分被导航栏截断，希望让下拉菜单脱离导航栏正常显示。

你当前的代码 #

HTML #

<nav>
    <a href="home.html">Home</a>
    <a href="about.html">About</a>
    <div class="dropdown">
        <button class="dropbtn">Works</button>
        <div class="content">
            <a href="index.html">Index</a>
            <a href="gallery.html">Gallery</a>
        </div>
    </div>
</nav>

CSS #

/*navigation*/
nav {
    display: flex;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: rgb(58, 73, 69);
    padding: 0%;
    margin: 2% 0% 2% 26%;
    border-radius: 5px;
    width: 65%;
}
nav a, nav button {
    background-color: rgb(58, 73, 69);
    color: white;
    padding: 3%;
}
nav a:hover{
    background-color:rgb(148, 247, 82);
    color: black;
}

/*hover dropdown menu*/
.dropdown {
    display: inline-block;
}
.dropbtn {
    border: none;
    padding: 57% 0% 0% 54%; 
    cursor: pointer;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.dropdown a {
    background-color: hsl(0, 0%, 90%);
    color: black;
    display: block;
    padding: 20%;
}
.dropdown .content {
    display: none;
    position: absolute;
    background-color: hsl(0, 0%, 90%);
    min-width: 100px;
    text-align: center;
    box-shadow: 2px 2px 5px hsl(237, 65%, 70%);
    z-index: 1;
}

.dropdown:hover, .content {
    display: block;
    background-color:#5a5c75;
    color: rgb(255, 249, 249);
}

解决方案 #

方案一：修复自定义CSS的问题 #

你的代码存在几个关键问题导致下拉菜单被截断，调整后即可正常显示：

1. 修正下拉菜单触发逻辑
   原CSS中.dropdown:hover, .content选择器逻辑错误，会同时触发.dropdown本身和.content的显示，正确写法是悬停.dropdown时显示其子元素.content：

   .dropdown:hover .content {
       display: block;
   }
   

2. 给.dropdown添加相对定位
   绝对定位的.content需要相对定位的父元素来确定位置，否则会相对于整个页面偏移，导致显示异常：

   .dropdown {
       display: inline-block;
       position: relative; /* 添加相对定位 */
   }
   

3. 调整.dropbtn的padding值
   原百分比padding会让按钮高度异常，挤压下拉菜单空间，替换为固定值更合理：

   .dropbtn {
       border: none;
       padding: 1rem 1.5rem; /* 替换原百分比padding */
       cursor: pointer;
       font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
   

4. 确保导航栏无溢出隐藏
   检查nav元素是否设置了overflow: hidden，如果有则去掉，该属性会截断绝对定位的下拉菜单：

   nav {
       overflow: visible; /* 显式设置为visible，避免意外覆盖 */
   }
   

5. 修复下拉菜单样式冲突
   原CSS会覆盖下拉菜单链接的样式，单独调整.content和链接的hover样式：

   .dropdown .content {
       display: none;
       position: absolute;
       background-color: #5a5c75;
       min-width: 100px;
       text-align: center;
       box-shadow: 2px 2px 5px hsl(237, 65%, 70%);
       z-index: 1;
   }
   .dropdown .content a {
       color: rgb(255, 249, 249);
       display: block;
       padding: 0.8rem 1rem; /* 调整padding更美观 */
   }
   .dropdown .content a:hover {
       background-color: rgb(148, 247, 82);
       color: black;
   }
   

方案二：使用Bootstrap原生下拉组件（更省心） #

既然你提到使用Bootstrap，直接用原生下拉组件可避免自定义CSS的问题，只需少量调整实现悬停触发：

1. 修改HTML结构为Bootstrap下拉组件

   <nav class="d-flex" style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background-color: rgb(58, 73, 69); margin: 2% 0% 2% 26%; border-radius: 5px; width: 65%;">
       <a href="home.html" class="nav-link text-white px-3 py-2">Home</a>
       <a href="about.html" class="nav-link text-white px-3 py-2">About</a>
       <div class="dropdown">
           <button class="btn btn-transparent text-white dropdown-toggle px-3 py-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Works
           </button>
           <ul class="dropdown-menu">
               <li><a class="dropdown-item" href="index.html">Index</a></li>
               <li><a class="dropdown-item" href="gallery.html">Gallery</a></li>
           </ul>
       </div>
   </nav>
   

2. 添加CSS实现悬停触发下拉
   Bootstrap默认是点击触发，添加以下CSS实现悬停显示：

   .dropdown:hover .dropdown-menu {
       display: block;
       margin-top: 0; /* 消除菜单顶部间隙 */
   }
   .nav-link:hover {
       background-color: rgb(148, 247, 82);
       color: black !important;
       border-radius: 5px;
   }
   .dropdown-item:hover {
       background-color: rgb(148, 247, 82);
       color: black;
   }
   

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