导航栏下拉菜单居中及按钮hover区域扩展问题求助

针对你遇到的两个问题，以下是具体修复方案：

问题1：下拉菜单居中且避免滚动条 #

之前用transform平移会导致元素实际占位未改变，超出容器后出现滚动条。正确做法是让.dropdown和导航栏其他链接保持一致的25%宽度，内部按钮居中显示，既能自适应不同分辨率，又不会产生滚动条。

问题2：下拉按钮占满25%宽度触发hover #

给下拉按钮设置100%宽度，让它填满.dropdown的整个区域，同时设置文本居中，这样整个按钮区域都能触发hover效果。

修改后的完整代码 #

CSS部分

.navbar {
  width: 100%;
  background-color: rgb(151, 44, 44);
  overflow: hidden; /* 替换auto为hidden，避免不必要的滚动 */
}

.navbar a {
  border-right:1px solid #f5b7b7;
  float: left;
  padding: 8px;
  color: white;
  text-decoration: none;
  font-size: 1.5vh;
  width: 25%; /* 四个导航项等分宽度 */
  text-align: center;
  box-sizing: border-box; /* 确保padding和border不额外增加宽度 */
}

.navbar a:hover {
  background-color: rgb(92, 25, 25);
}

.navbar a.active {
  background-color: #04AA6D;
}

/* DROPDOWN */
.dropdown {
  float: left; 
  overflow: hidden;
  width: 25%; /* 和其他导航项保持一致宽度 */
  border-right:1px solid #f5b7b7; /* 添加上右边框，统一样式 */
  box-sizing: border-box; /* 确保border不影响宽度计算 */
}

.dropdown .dropbtn {
  font-size: 1.5vh;  
  border: none;
  outline: none;
  color: white;
  padding: 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  width: 100%; /* 按钮占满整个dropdown宽度 */
  text-align: center; /* 文本居中 */
  cursor: pointer; /* 鼠标悬停显示指针，提升交互体验 */
}

.dropdown:hover .dropbtn {
  background-color: rgb(92, 25, 25);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 可选：若希望下拉菜单居中显示，替换上面的dropdown-content样式为：
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}
*/

.dropdown-content a {
  float: none;
  color: rgb(0, 0, 0);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

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

HTML部分

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="你的CSS文件路径.css"> <!-- 确保引入CSS文件 -->
</head>
<body>
    <div class="navbar" id="tree">
        <a href="/">Home1</a> 
        <a href="/">Home2</a> 
        <a href="/">Home3</a> 
        <div class="dropdown">
            <button class="dropbtn">TOPICS ▼</button>
            <div class="dropdown-content">
                <a href="#">t1</a>
                <a href="#">t2</a>
                <a href="#">t3</a>
            </div>
        </div>
    </div>
</body>
</html>

关键改动说明 #

1. 给.dropdown设置width:25%和border-right，与其他导航项保持样式统一，同时用box-sizing: border-box确保padding和border不会额外增加元素宽度，避免溢出。
2. 给.dropbtn设置width:100%和text-align:center，让按钮填满整个.dropdown区域，实现整个区域触发hover。
3. 将.navbar的overflow:auto改为overflow:hidden，避免因元素布局问题产生不必要的滚动条。
4. 可选：如果需要下拉菜单整体居中显示，可调整.dropdown-content的定位样式（代码中已给出注释示例）。

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