我一直在尝试为我的"评论"创建一个下拉菜单。链接在我的导航栏上，并且由于某些原因，它通过扩展导航栏以适应下拉菜单内容而将页面内容向下推。如果可能的话，有人能帮我弄清楚如何创建一个下拉菜单，我可以添加到我的网站增长?作为旁注，有人可以检查我的css的标题，并确保它看起来不错吗?我真的很感激!
这是我的HTML代码(我已经恢复)
/* Add a background color with some padding to the body */
body {
background: #383F51;
font-family: Geneva, sans-serif;
}
/* Header and Blog Title */
header {
background: #91c7b1;
margin-top: 15px;
padding: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
}
header h1 {
font-size: 42px;
font-family: "Electrolize", sans-serif;
}
header p {
font-style: italic;
font-size: 24px;
}
/* navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
display: block;
height: auto;
width: auto;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* navigation bar links */
nav a {
float: left;
color: white;
text-align: center;
font-size: 20px;
padding: 10px;
margin-left: 5px;
text-decoration: underline;
font-family: "Electrolize", sans-serif;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.rightcolumn {
flex: 1;
}
.leftcolumn {
flex: 5;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.row {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;}
main > .row {
display: flex;
}
@media screen and (max-width: 800px) {
main > .row {
flex-direction: column;
}
}
/* images (work in progress at the moment) */
/* Post layout for articles and additional areas */
.post {
display: block;
background-color:white;
padding: 20px;
margin-top: 10px;
border-style: solid;
border-color: #91c7b1;
border-radius: 20px;
}
article h2, article h2 a, .post h2 {
font-size: 24px;
text-decoration: none;
color: #533A71;
}
article h5{
font-size: 16px;
}
.post p {
line-height: 1.5em;
font-size: 16px;
}
/* Footer */
footer {
color: black;
margin-top: 10px;
left: 0;
bottom: 0;
width: 100%;
background-color: #91c7b1;
text-align: center;
font-size: 18px;
border-radius: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project Incredible Indie Games</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- End Header -->
<!-- Begin Navigation -->
</header>
<nav role="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Reviews</a>
<a href="#">Contact</a>
</nav>
<!-- End Navigation -->
<!-- End Header -->
<!-- Begin Main Content -->
<main role="main">
<div class="row">
<!-- Begin Blog Posts -->
<section class="leftcolumn">
<article class="post" role="article">
<h2> <a href="Ori-and-The-Blind-Forest.html">Ori and The Blind Forest: A Soulful and Stunning Action-Platformer</a></h2>
<h5><time datetime="2021-09-22">Sep, 22 2021</time></h5>
<img src="ori-and-the-blind.png" alt="Ori and The Blind Forest Game Cover">
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
<article class="post">
<h2>Ori and The Will of the Wisps</h2>
<h5>Sep 23, 2021</h5>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
</section>
<!-- End Blog Posts -->
<!-- Begin Sidebar -->
<aside class="rightcolumn" role="complementary">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h2>Upcoming Posts</h2>
</section>
</aside>
<!--End Sidebar -->
</div>
</main>
<!--End Main -->
<!--Begin Footer-->
<footer class="footer" role="contentinfo">
<p>Blog Created by: Abby Lake</p>
</footer>
<!--End Footer-->
</body>
</html>非常感谢!
我试着在codepen代码,但却没有看到下拉。无论如何，这里有一个简单的教程来帮助你:下拉教程
同样，你的标题css看起来不错。一些Css提示:尽量使用"rem"单位，避免使用过于复杂的Css选择器以避免特异性问题。