Responsive Menü Yapma Problemi

yazilimyolcusu 387 gün önce

262 defa görüntülendi

Merhaba. Responsive menü yapmaya çalışıyorum. Menünün alt menüdeki "li" lerden sadece bir tanesi görünüyor. Diğer iki "li" görünmüyor. Bir bakabilir misiniz acaba?
https://hizliresim.com/s3gl7tb

<div id="menuikon" onclick="menuikontikla()" class="menuicon"><img src="images/icons/menu/menu.png" alt=""></div>

<nav id="nav">
    <ul id="ul">
        <li><a href="index.php" class="">Anasayfa</a></li>
        <li><a href="#" class="">Kurumsal</a>
            <ul>
                <li><a href="hakkimizda.php" class="">Hakkımızda</a></li>
                <li><a href="vizyonumuz.php" class="">Vizyonumuz</a></li>
                <li><a href="misyonumuz.php" class="">Misyonumuz</a></li>
            </ul>
        </li>
        <li><a href="#" class="">Hizmetlerimiz</a>
            <ul>
                <li><a href="devamedenprojeler.php" class=""><?php echo substr("Yetkilendirilmiş Tüzel Kişilik Hizmetleri",0,44); ?></a></li>
                <li><a href="bitirilenprojeler.php" class=""><?php echo substr("Bitirilenler",0,44); ?></a></li>
            </ul>
        </li>
        <li><a href="" class="">Projelerimiz</a>
            <ul>
                <li><a href="devamedenprojeler.php" class=""><?php echo substr("Devam Edenler",0,44); ?></a></li>
                <li><a href="bitirilenprojeler.php" class=""><?php echo substr("Bitirilenler",0,44); ?></a></li>
            </ul>
        </li>
        <li><a href="iletisim.php" class="">İletişim</a></li>
    </ul>
</nav>

@media screen and (max-width: 376px) {

html, body {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}

.logo_menu_alani {
display: grid;
grid-template-columns: 13% 87%;
grid-template-rows: 80px;
}

.logo_alani {
height: 80px;
line-height: 80px;
font-size: 18px;
font-family:'Times New Roman', Times, serif;
}

.logo_alani img {
height: 70px;
}

.menuicon {
height: 80px;
line-height: 80px;
text-align: right;
}

.menuicon img {
width: 25px;
height: 25px;
}

ul {
grid-template-columns: 375px;
grid-template-rows: 80px;
list-style: none;
background-color: red;
}

li {
margin-left: -78px;
width: 375px;
text-align: center;
display: block;
height: 80px;
line-height: 80px;
background-color: blue;
}

li:hover {
background-color: #016fa5;
color: #fff;
}

li a {
text-decoration: none;
font-size: 17px;
color: #fff;
}

li:hover a {
color: #fff;
}

ul li ul {
position: relative;
width:375px;
height: auto;
display: none;
z-index: 999999;
}

ul li:hover ul {
position: relative;
width:375px;
height: auto;
display: block;
z-index: 999999;
}

ul li:hover ul li {
position: absolute;
width: 375px;
height: auto;
margin-left: 0px;
background-color: red;
z-index: 999999;
}
}

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)

murat03yigit

380 gün önce

https://codepen.io/f10tme/pen/BaMZBqO

#012966

yazilimyolcusu

387 gün önce

Sorunu şu şekilde hallettim ama mesela, hizmetlerimiz linkinden projelerimiz linkine tıkladığımda, projelerimiz linkinin alt menüsündeki bir linke tıklanıyor.
https://hizliresim.com/iofhd6c

<div id="menuikon" onclick="menuikontikla()" class="menuicon"><img src="images/icons/menu/menu.png" alt=""></div>

<nav id="nav">
    <ul>
        <li><a href="index.php" class="">Anasayfa</a></li>
        <li><a href="#" class="">Kurumsal</a>
            <ul>
                <li><a href="hakkimizda.php" class="">Hakkımızda</a></li>
                <li><a href="vizyonumuz.php" class="">Vizyonumuz</a></li>
                <li><a href="misyonumuz.php" class="">Misyonumuz</a></li>
            </ul>
        </li>
        <li><a href="#" class="">Hizmetlerimiz</a>
            <ul>
                <li><a href="misyonumuz.php" class=""><?php echo substr("Yetkilendirilmiş Tüzel Kişilik Hizmetleri",0,44); ?></a></li>
                <li><a href="hakkimizda.php" class=""><?php echo substr("Bitirilenler",0,44); ?></a></li>
            </ul>
        </li>
        <li><a href="#" class="">Projelerimiz</a>
            <ul>
                <li><a href="devamedenprojeler.php" class=""><?php echo substr("Devam Edenler",0,44); ?></a></li>
                <li><a href="bitirilenprojeler.php" class=""><?php echo substr("Bitirilenler",0,44); ?></a></li>
            </ul>
        </li>
        <li><a href="iletisim.php" class="">İletişim</a></li>
    </ul>
</nav>

ul {
        z-index: 99999;
        display: block;
        grid-template-columns: auto;
        grid-template-rows: auto;
        /* align-items: center; */
        list-style: none;
        background-color: red;
    }
    
    li {
        margin-left: -78px;
        /* left: -32px; */
        width: 375px;
        height: 60px;
        text-align: center;
        display: block;
        background-color: blue;
    }
    
    li:hover {
        margin-left: -78px;
        /* left: -32px; */
        width: 375px;
        height: auto;
        text-align: center;
        display: block;
        background-color: #016fa5;
        color: #fff;
    }
    
    li a {
        text-decoration: none;
        font-size: 17px;
        color: #fff;
    }
    
    li:hover a {
        color: #fff;
    }
    
    ul li ul {
        position: relative;
        width:auto;
        height: auto;
        display: none;
        text-align: center;
    }
    
    ul li:hover ul {
        position: relative;
        display: block;
        width:auto;
        height: auto;
        text-align: center;
        background-color: red;
    }
    
    ul li:hover ul li {
        position: relative;
        margin-left: 0px;
        text-align: center;
        width: auto;
        height: 60px;
        display: block;
        background-color:red;
        
    }

    ul li:hover ul li a {
        padding-right: 35px;
    }
}

#012952