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