Responsive Menü Yapma Problemi

yazilimyolcusu 518 gün önce

309 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

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (2)

murat03yigit

510 gün önce

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

#012966

yazilimyolcusu

518 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