如何克服tailwindcss中页面内容的下拉菜单？答案

【问题标题】：How to overcome dropdown menu on page content in tailwindcss?如何克服tailwindcss中页面内容的下拉菜单？
【发布时间】：2022-08-19 23:28:39
【问题描述】：

我在solid-js 应用程序中使用Tailwindcss 创建了一个下拉菜单。该菜单运行良好，但它显示在屏幕内容的背景中，导致它被它隐藏。我希望菜单显示在屏幕内容上，而不是显示在背景中。这是我的菜单代码：

<div className=\"fixed md:w-1/4 xl:w-1/5 pb-20 pt-4 left-0 bg-white dark:bg-gray-800 shadow border-r dark:border-gray-700 dark:text-white px-2 hover:overflow-y-auto body-scrollbar\">
        <h2 class=\"font-semibold text-2xl\">{props.title}</h2>
       <ul className=\"mt-4 flex flex-col space-y-2\">
        <For each={props.links}>
                {(item) => (
                  <li>
                     <NavLink
              href={item.href}
              className=\"flex items-center justify-between  py-2 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700\"
              end={item.end}
              activeClass=\"bg-gray-100 dark:bg-gray-700\"
            >
              <div className=\"flex items-center space-x-3\">
                <div className=\"flex place-items-center p-2 bg-blue-500 rounded-full text-white text-xl\">
                  {item.icon()}
                </div>
                <p>{item.name}</p>
              </div>
            </NavLink>
                </li>
              )}
        </For>
   { /*</select>*/}
   </ul>
   </div>

谢谢！

标签： javascript drop-down-menu tailwind-css solid-js

【解决方案1】：

看起来这段代码的一部分是从一个 react 或 react-like 项目中复制的。虽然我怀疑NavLink 是否会按预期工作，但您的问题是您在某些元素中使用className 而不是class。

【讨论】：