我有一个任务，创建一个导航栏与两个下拉悬停使用顺风css。我已经阅读了Tailwind文档中关于悬停、聚焦等的内容。我试过使用组和组修饰符，但不能让它工作。
所以我决定问你们一些方向和帮助，如果可能的话。你会怎么做？
下面是我正在使用的代码：
”

{/*First button - Resources */}
    <div className='flex item-center flex-col justify-center m-5 relative group'>
        <button className='p-3 text-sm hover:bg-slate-400'>Resources</button>

      <div className='group-hover: block'>
        <ul className='mt-2 flex flex-col items-center justify-center'>
            <li><a href='#'>New Starter</a></li>
            <li><a href='#'>Stakeholders</a></li>
            <li><a href='#'>Checklists</a></li>
        </ul>

      </div>
        
    </div>

    {/*Second button - Tools */}

    <div className='flex item-center flex-col justify-center relative group'>
        <button className='p-3 text-sm hover:bg-slate-400'>Tools</button>

      <div className='group-hover: block'>
        <ul className='mt-2 flex flex-col items-center'>
            <li><a href='#'>TIE</a></li>
            <li><a href='#'>Asset manager</a></li>
            <li><a href='#'>PM</a></li>
        </ul>

      </div>
        
    </div>

</div>`