Superfish jQuery 菜单（操作方法）

Question

我正在尝试在我的一个网站中使用 Superfish jQuery 菜单。 到目前为止的结果相当令人失望，因为当我按照共享的安装说明（在快速入门指南下）时，我的外观和感觉几乎没有。

我的意图是让菜单位于页面的最顶部，固定（因此向下滚动时它不会消失）并覆盖 100% 的宽度。 使用这个属性（100% 宽度）会阻止下拉菜单在这个基本的 CSS 版本中工作（我正在学习绳索，所以我很可能没有正确编码），我不知道为什么。

无论如何，我想用 Superfish 实现同样的效果，我希望能得到一些编码帮助，我不需要特定的颜色样式，但“安装说明”（如果有任何意义的话）会很有帮助。

请参见下面的当前代码：

 .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; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #d0d3d4; } li { float: left; } li a, .dropbtn { display: inline-block; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover.dropbtn { background-color: #abacac; } li.dropdown { display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #d0d3d4; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover {background-color: #abacac;}.dropdown:hover.dropdown-content { display: block; }

 <ul> <:--- nothing ---> <li class="banner">nassau</li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul>

对你的帮助表示感谢。

Answer 1

对于基本的 CSS 版本，如果将其包装在一个 div 中并给出一个固定的 position，顶部为 0，宽度为 100%，它确实有效。

您的代码没有显示任何 CSS 显示 position 固定在任何地方。

 .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; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #d0d3d4; } li { float: left; } li a, .dropbtn { display: inline-block; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover.dropbtn { background-color: #abacac; } li.dropdown { display: inline-block; }.dropdown-content { display: none; position: absolute; background-color: #d0d3d4; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }.dropdown-content a:hover {background-color: #abacac;}.dropdown:hover.dropdown-content { display: block; }.fixed{ position:fixed; width:100%; top:0; }

 <div class="fixed"> <ul> <:--- nothing ---> <li class="banner">nassau</li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> <div style="margin-top;100px:height;1000px;">sssssssx</div>