为什么我的转换无法在点击上进行？

Question

我有以下由给定css样式的html

 <nav>
            <div class="flex">
                <div id="menu">Menú</div> /*this is what i click for opacity to change*/
                <div class="option"><a href="#"></a>Opcion 1</div> /*option class is what i want to spawn tourght opacity change*/
                <div class="option"><a href="#"></a>Opcion 2</div>
                <div class="option"><a href="#"></a>Opcion 3</div>
                <div class="option"><a href="#"></a>Opcion 4</div>
            </div>
        </nav>

这是CSS

@media screen and (max-width: 640px) {
        .flex {
            width: 100%;
            height: 100%;
            flex-direction: column;
            display: flex;
        }

        .option {
            color: white;
            width: 100%;
            margin-bottom: 2px;
            margin-left: 0vw;
            opacity:0; /*default opacity*/
            transition: 1s linear; /*my animation*/
        }

        #menu {
            margin-bottom: 2px;
            display: flex;
            width: 100%;
            background-color: green;
            justify-content: center;
            align-items: center;
            color: white;
            min-height: 40px;
        }

         /*supposed option animation*/
         #menu:hover>.option{
             opacity:1;
         }

    }

要点是，每当我单击id="menu"时，我都希望选项的不透明度为1。但是，只要我单击菜单，它就不会发生。它什么都不干。