ASP.NET'te CSS düzgün çalışmıyor

595914 dedi:

Visual Studio Code live server üzerinden sitemi açtığımda beklediğim, istediğim gibi çalışıyor. Kodları ASP.NET'e taşıdığımda görüldüğü üzere açılan sub menu alakasız bir şekilde alt tarafa kayıyor. Neden alakalı olabilir?

HTML:Panoya kopyala

<header>
 <nav>
 <div class="container">
 <h1 style="color: white; font-weight: lighter; font-size: 2rem;">LANGUAGES</h1>
 <ul class="main-list">
 <li class="main-list"><a href="#" class="link">Java</a></li>
 <li class="main-list"><a href="#" class="link">Python</a></li>
 <li class="main-list"><a href="#" class="link">.NET</a>
 <div class="support">
 <ul class="sub-menu">
 <li><a href="#" class="link">C</a></li>
 <li><a href="#" class="link">C#</a></li>
 <li><a href="#" class="link">C++</a></li>
 </ul>

 </div>

 </li>
 <li class="main-list"><a href="#" class="link">PHP</a></li>
 </ul>
 </div>
 </nav>
 </header>

CSS:Panoya kopyala

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Nunito', sans-serif;

}
body {
 background-color: #16233e;
}
header {
 background-color: #0E1729;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Tilt+Neon&display=swap');
.container {
 max-width: 1100px;
 margin: 0 auto;
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: space-around;

}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
li {
 display: inline;
 position: relative;

 width:500px;
 font-size:1.3rem;
}

.main-list {
 padding: 0 15px;
}

li:hover {
 background-color: #16233e;
}

@keyframes example {
 from {
 top: 50px;
 opacity: 0;
 }
 to {
 top: 100%;
 opacity: 1;
 }
}

ul.sub-menu {
 display: none;
}

.support {
 background-color: transparent;
 display: none;
 z-index: 2;
}

li:hover .support {
 position: absolute;
 display: block;
 width: 100%;
 height: 1rem;
 left: 0;
 z-index: 2;
 background-color: red;
}

li:hover ul.sub-menu {
 position: absolute;
 display:flex;
 flex-direction: column;
 top: 100%;
 left: 0;
 animation: example 0.2s linear 0s;
 border:1px solid white;
 border-radius: 2px;
 width: 100%;
}

.support:hover ul.sub-menu {
 position: absolute;
 display:flex;
 flex-direction: column;
 top: 100%;
 left: 0;
 animation: example 0.2s linear 0s;
 border:1px solid white;
 border-radius: 2px;
 width: 100%;
}

ul.sub-menu li {
 width:100%;
 padding: 5px;
}

ul.sub-menu li:hover {
 background-color: #1e2f54;
}

.link {
 color: white;
 text-decoration: none;
}

.content-container {
 position: relative;
 top: 50px;
 display: flex;
 justify-content:flex-start;
 max-width: 800px;
 margin: 0 auto;
}

.header2, .paragraph {
 color: white;
 justify-self: left;
}

.content1 {
 width: 33%;
 height: 200px;
 overflow: hidden;
 margin: 0 25px;
}

Genişletmek için tıkla...