CSS'de ul problemi | Cevap #10645

Arkadaşlar merhaba. Ben açılır-kapanır bir menü yapıyorum hatta bitirdim bile ama bir sorun var. a:focus olduğunda ul.second-menu fotoğrafta da göründüğü gibi .second-menu eğer hakkımızdanın altındaysa oradan başlıyor ve Ana menüden hakkımızdaya kadar ana menünün altı boş kalıyor. Eğer sorun bildirin altındaysa ana menü + hakkımızda + sorun bildirin altı boş kalıyor. Benim yapmak istediğim bütün a'lar focus olduğunda ana menünün altına bitişik olarak çıkması. Fakat nasıl yapılur bilmiyorum. Umarım anlatabilmişimdir.

    <div class="dropdown-menu">
            <ul class="first-menu">
                <li>
                    <a href="#">Ana Menü</a>
                    <ul class="second-menu">
                        <li>Ürünler</li>
                        <li>Biz Kimiz</li>
                        <li>Politikalarımız</li>
                    </ul>
                </li>
                <li>
                    <a href="#">Hakkımızda</a>
                    <ul class="second-menu">
                        <li>Ürünler</li>
                        <li>Biz Kimiz</li>
                        <li>Politikalarımız</li>
                    </ul>
                </li>
                <li>
                    <a href="#">İletişim</a>
                    <ul class="second-menu">
                        <li>Ürünler</li>
                        <li>Biz Kimiz</li>
                        <li>Politikalarımız</li>
                    </ul>
                </li>
                <li>
                    <a href="#">Sorun Bildir</a>
                    <ul class="second-menu">
                        <li>Ürünler</li>
                        <li>Biz Kimiz</li>
                        <li>Politikalarımız</li>
                    </ul>
                </li>
            </ul>
        </div>

       *{
            box-sizing: border-box;
        }

      
        .dropdown-menu .first-menu{
            display: inline-flex;
            background-color: red;
            padding: 0;
        }

        .dropdown-menu .first-menu li{
            list-style: none;
            
            text-align: center;
            /* border: 1px solid #323232; */
            position: relative;
            
        }

        .dropdown-menu .first-menu li a{
            display: inline-block;
            text-decoration: none;
            color: white;
            padding: 10px 30px;
            width: 150px;
        }

        .dropdown-menu .first-menu li .second-menu{
            position: absolute;
            top:100%;
            left:0;
            display: flex;
            flex-direction: row;
            visibility: hidden;
            width: 600px;
            background-color: grey; 
        }

    

        .dropdown-menu .first-menu li .second-menu li{
            border: none;
            padding: 5px 30px;
            width: 150px;
        }

        .dropdown-menu .first-menu li a:focus{
            background-color: blue;
        }

        .dropdown-menu .first-menu li a:focus + .second-menu{
            visibility: visible;
        }