我的任務是使用Tailwind css創建一個在懸停時有兩個下拉菜單的導航欄。我已經閱讀了關于懸停、聚焦等的順風文檔。我已經嘗試使用組和組修改器，但無法正常工作。

所以我決定向你們尋求一些幫助，如果可能的話。你會怎么做？

以下是我目前正在處理的代碼:

`

{/*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>`

將所有這些放在一起:

<script src="https://cdn.tailwindcss.com"></script>

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

  <div class='hidden group-hover:block'>
    <ul class='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>

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

  <div class='hidden group-hover:block'>
    <ul class='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>