Superfish jQuery菜单固定顶部全屏宽度实现技术求助

一、引入依赖文件 #

在页面<head>或<body>末尾添加以下文件：

• jQuery库（版本1.7+即可）
• Superfish核心CSS
• Superfish核心JS

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Superfish CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css">
<!-- Superfish JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js"></script>

二、修正HTML结构 #

Superfish依赖嵌套<ul>实现下拉菜单，替换你当前的自定义dropdown结构：

<ul class="sf-menu superfish">
  <li class="banner">nassau</li>
  <li><a href="#news">News</a></li>
  <li>
    <a href="#">Dropdown</a>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </li>
</ul>

三、初始化Superfish #

在页面加载完成后初始化菜单：

$(document).ready(function() {
  $('.sf-menu').superfish({
    delay: 200, // 鼠标离开后下拉菜单保持显示的毫秒数
    animation: {opacity:'show', height:'show'}, // 下拉动画效果
    speed: 'fast' // 动画速度
  });
});

四、添加CSS实现固定顶部与100%宽度 #

移除你原有CSS中导致下拉失效的overflow:hidden，并添加固定定位样式：

.banner {
  color: #000000;
  font-size: 2em;
  font-family: "Public Sans"; 
  font-weight: bolder;
  letter-spacing: -0.05em;
  padding-left: 0.2em;
  padding-right: 0.2em;
}

/* 核心菜单样式 */
.sf-menu.superfish {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #d0d3d4;
  position: fixed; /* 固定在顶部 */
  top: 0;
  left: 0;
  width: 100%; /* 占满宽度 */
  z-index: 9999; /* 确保菜单在其他内容上方 */
}

.sf-menu.superfish > li {
  float: left;
  position: relative; /* 让子菜单相对于父li定位 */
}

.sf-menu.superfish li a {
  display: inline-block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: black;
}

.sf-menu.superfish li:hover > a,
.sf-menu.superfish li.sfHover > a {
  background-color: #abacac;
}

/* 下拉菜单样式 */
.sf-menu.superfish ul {
  background-color: #d0d3d4;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  min-width: 160px;
}

.sf-menu.superfish ul li a:hover {
  background-color: #abacac;
}

关键修复说明 #

1. 移除overflow:hidden：你原有CSS中给<ul>加了overflow:hidden，会把绝对定位的下拉菜单裁剪掉，导致下拉失效。
2. 使用嵌套<ul>：Superfish不支持用<div>做下拉容器，必须用嵌套的<ul>结构才能被正确识别。
3. 固定定位设置：通过position:fixed+top:0+left:0让菜单固定在顶部，width:100%确保占满页面宽度，z-index:9999防止被其他内容遮挡。

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