CSS'de ul problemi

rifatozbek 877 gün önce

336 defa görüntülendi

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;
        }

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

cemcanpolat

876 gün önce

Merhaba, senin css kodlarını çok değiştirmeden aşağıdaki şekilde tekrar güncelledim, bu şekilde istediğin gibi çalışıyor.
Ama farkı, yani menü içeriğinin değiştirğini anlayabilmen için, second-menu içeriğini değiştirmen gerek, hepsi aynı olmasınki farkı anla.
İstediğin bu muydu denermisin?

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .dropdown-menu .first-menu li {
      list-style: none;
      text-align: center;
    }

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

    .dropdown-menu .first-menu li .second-menu {
      position: absolute;
      left: 0;
      width: 100%;
      display: none;
      background-color: grey;
    }

    .dropdown-menu .first-menu li .second-menu li {
      padding: 5px 30px;
    }

    .dropdown-menu .first-menu li a:focus+.second-menu {
      display: flex;
    }

#010643

rifatozbek

876 gün önce

@cemcanpolat çok teşekkür ederim. Sanırım benim buradaki hatam first-menu li ye position relative verdikten sınra second-menu ye absolute vermedi. Relative sayesinde left 0 kendini first-menu li nin en solunda sayıyor en başa geçmiyordu. Relative i kaldırarak second-menu yü bağımsız yaparsak sorun ortadan kalkıyormuş. Çok teşekkür ederim.

#010645