我已经用html和css编写了两个月的编码，并认为一个很好的学习练习是建立一个模拟在线简历。显然我遇到了一些超出我目前能力的问题。
所以我使用@media的最大/最小宽度来调整我的网站大小，具体取决于视口的大小。我遇到了一个问题，当我的屏幕大于761px，这是我的最小宽度值时，我工作经验部分中的无序/有序列表被移动到屏幕的最顶部并重叠我的导航栏使它无用。然而，我无法找到引起这种行为的问题。你们认为你可以帮助我吗？
我的HTML下面：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- NAVIGATION MENU -->
<!-- /////////////////////////////////////////////////////////////- -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">home</a></li>
<!-- will take you back to my resume (front page) -->
<li>
<a href="#">about ￬</a>
<!-- will take you to different sections of the resume page -->
<ul class="hidden">
<li><a href="#interests">Interests</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#education">Education</a></li>
<!-- <li><a href="#">Contact Me</a></li> -->
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<!-- will take you to different pages devoted to different topics -->
<ul class="hidden">
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Games</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
<!-- NAVIGATION MENU -->
<!-- /////////////////////////////////////////////////////////////- -->
<!-- GARBAGE DATA FOR TESTING -->
<div class="content-wrap">
<img class="profile-img col-narrow" src="images/coffeephoto3-resize.jpg" alt="Raymond Spencer Norton / October 2017">
<div class="col-wide">
<h1 class="title">Raymond Norton</h1>
<h2>Web/Game Developer + Coder</h2>
<p class="no-wrap-text"> As a Full-Stack Web/Game developer I specialize in exceeding all front and back-end
requirements for developing scalable and adaptable applications and games for my customers.<p/>
</div>
</div>
</header>
<main>
<!-- // Start of interests block -->
<section id="interests" class="interests">
<div class="content-wrap">
<h2> My Interests </h2>
<h3> Web Design </h3>
<p> REMOVED CAUSE NOT RELEVANT /p>
<h3> Programming </h3>
<p> REMOVED CAUSE NOT RELEVANT
</p>
<h3> Game Development </h3>
<p> </p>
<!-- // end of interests block -->
</div>
</section>
<!-- // Work Experience -->
<section id="work" class="work">
<div class="content-wrap">
<h2>Work Experience</h2>
<!-- Job Details 1: -->
<div class="col-narrow">
<h3>Front-end Website Developer</h3>
<p class="uppercase">Independent / Freelance </p>
<p>Sept 2017 - Present</p>
</div>
<!-- paragraphs. -->
<div class="col-wide job-description">
<p>Provides various front end related services ranging from Website development work,
design consultations, character modelling and animation, scripting in Java, C++ or C# and
game development in Unity and the Unreal Game Engines.</p>
<p>Key Qualifications:</p>
<ul>
<li>Front-end web development for mobile and desktop applications utilizing HTML5, CSS3, Wordpress, Javascript and JQuery</li>
<li>Back-end web development with Javascript, C++, C#, Python </li>
<li>Designing character models in Maya and Blender3D studios.</li>
<li>Game level design in Unity, Unreal engine.</li>
<li>Coding in Visual Studios</li>
</ul>
</div>
<!-- Job Details 2: -->
<div class="col-narrow">
<h3>Indie Game Developer</h3>
<p class="uppercase">Independent </p>
<p>Sept 2017 - Present</p>
</div>
<!-- paragraphs. -->
<div class="col-wide job-description">
<p>I have launched several mobile arcade genre games for IOS and Android.
Some of my most successful game launches include Space-Invaders Reborn(800,000 downloads),
a modern take on a classic arcade game and Traveler(275,000 downloads), an action/adventure
side scrolling game with RPG elements. </p>
<p>Key Qualifications:</p>
<ul>
<li>Successfully launched numerous mobile titles via the IOS App store and Android marketplace.</li>
<li>Developed successful SEO strategies for the launch of my self published titles.</li>
</ul>
</div>
<!-- end of Job Details block. -->
</section>
<!-- // Education section starts-->
<section id="education" class="education">
<div class="content-wrap">
<h2>Education</h2>
<!-- School details. -->
<h3>COLLEGE, BC</h3>
<p>Second Year General Studies - 2014-2016</p>
<!-- paragraphs . -->
<h3>Lynda.com - Online</h3>
<p>CSS & HTML, Java, C++, C# - 2016-2018</p>
<h3>UNIVERSITY, BC</h3>
<p>Diploma of Game Design - 2018-2019</p>
</div>
<!-- End of school details. -->
</section>
<!-- // Education section ends-->
</main>
<!-- // Footer & contact info -->
<footer id="contact">
<div class="content-wrap">
<h2>Contact me</h2>
<p> Please address all business communications to my email.
<!-- Social media and contacts-->
<div class="contact-info">
<a href="mailto:[email protected]"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<span class="sr-only">Email</span></a>
<a href="https://twitter.com/removed"target="_blank"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Twitter</span></a>
<a href="https://www.linkedin.com/in/removed/"target="_blank"><i class="fa fa-linkedin-square fa-2x"
aria-hidden="true"></i><span class="sr-only">LinkedIn</span></a>
<a href="https://www.facebook.com/removed"target="_blank"><i class="fa fa-facebook-square fa-2x"
aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
</div>
<p>Copyright 2017 by Raymond Norton</p>
</div>
</footer>
</body>
</html>
我的CSS下面
ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 0;
position: fixed;
opacity: 0.80;
}
/* create a horizontal list with spacing */
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/* style for menu links */
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/* hover state for top level links */
li:hover a {
background: #19c589
}
/* style for dropdown links */
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/* hover state for dropdown links */
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/* hide dropdown links until they are needed */
li ul {
display: none;
}
/* make dropdown links vertical */
li ul li {
display: block;
float: none;
}
/* prevent text wrapping */
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/* display dropdown on hover */
ul li a:hover + .hidden, .hidden:hover {
display: block;
position: relative;
/* CHANGE: Absolute to relative */
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/* responsive Styles */
@media screen and (max-width : 760px) {
/* make dropdown links appear inline */
ul {
position: static;
display: none;
}
/* create vertical spacing */
li {
margin-bottom: 1px;
}
/* make all menu links full width */
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
opacity: 0.8;
}
.col-narrow {
width: 30%;
float: left;
padding-right: 20px;
}
.col-wide {
width: 70%;
float: left;
padding-left: 20px;
}
}
@media (min-width: 761px){
header {
text-align: center;
}
.profile-img {
width: 200px;
border-radius: 50%;
}
}
/* NAVIGATION MENU END */
/* ///////////////////////////////////////////////////////////// */
/* Global Styles */
/*----------------------------------*/
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Saira Semi Condensed', sans-serif;
margin: 0;
}
h1, h2 {
font-family: 'caveat', cursive;
font-weight: 300;}
h1 {
font-size: 60px;
}
h2 {
font-size: 35px;
margin-top: 0;
}
h3 {
margin: 0;
}
a {
color: #ef233c; /* link color */
}
a:hover {
text-decoration: none;
}
/* content-wrap */
/*----------------------------------*/
.content-wrap {
max-width:1080px; /*90%*/
margin: 0 auto;
padding: 60px 100px; /*35px 25px*/
overflow: hidden; /*auto*/
}
.uppercase {
text-transform: uppercase;
}
/*Download Button styles*/
/*----------------------------------*/
.btn {
text-decoration: none; /*Removes text underline */
background-color: #EF233C;
color: white;
padding: 5px;
display: inline-block;
}
/* Title */
/*----------------------------------*/
.title {
color: white;
}
/* Header & Footer */
/*----------------------------------*/
header, footer {
background: #2b2d42;
color: #8d99ae
}
header {
padding-top: 15px;
position: relative;
text-align: center;
/*is vital for download link position below*/
}
/*header */
/*----------------------------------*/
header h1, header h2{
color: #edf2f4;
margin: 0;
}
.no-wrap-text {
overflow: hidden;
}
/*Prevents the header text paragraph from flowing beneath the image*/
.profile-img {
border-radius: 25%;
float: left;
}
.download {
position: absolute;
bottom: 0;
right: 0;
/* Download controls the download button position */
}
/*footer*/
footer {
text-align: center;
}
.contact-info a {
padding: 8px;
margin: 10px;
display:inline-block;
color: white;
/*Modifies the contact me sections links*/
}
.contact-info a:hover {
color: #4668A5;
/*Highlights the contact info when the cursor is on it for better visability*/
}
/* my Interests*/
/*----------------------------------*/
.interests {
background: #edf2f4;
}
/* Work Experience */
/*----------------------------------*/
.work {
background: #edf2f4;
/*background: linear-gradient(rgba(237, 242, 244, 0.8), rgba(237, 242, 244, 0.5)),
url(../images/Vancouver.jpg) no-repeat fixed;
background-size: cover;*/
}
h3 ~ p {
margin: 0;
}
.job-description {
margin-bottom: 20px;
}
.job-description p:first-of-type {
margin-top: 0;
}
/* job-description is only useful once you add additional jobs, with only a single job
it has no apparent affect.*/
/* Education */
/*----------------------------------*/
.education {
/*background: #8d99ae*/
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)),
url(../images/Vancouver.jpg) no-repeat fixed;
background-size: cover;
}
p + h3 {
margin-top: 20px;
}
你的问题是你有多个ul标签，并且所有标签都有一种风格，有些是垂直的，有些是水平的。
HTML上的更改：
我已经离开了ul菜单，但将其他两个ul改为div。我还添加了一个容器，以便您可以更轻松地保存内容（内部<div>s），如果您愿意，可以将其删除。
CSS的变化：
在styles.css底部添加了两个类来支持container div和每个inner div。
注意：我没有对其余代码进行质量检查。我只解决了你目前的问题。
尝试通过单击此答案底部的Run code snippet来运行代码。
这是代码：
ul {
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
left: 0;
position: fixed;
opacity: 0.80;
}
/* create a horizontal list with spacing */
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/* style for menu links */
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/* hover state for top level links */
li:hover a {
background: #19c589
}
/* style for dropdown links */
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/* hover state for dropdown links */
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/* hide dropdown links until they are needed */
li ul {
display: none;
}
/* make dropdown links vertical */
li ul li {
display: block;
float: none;
}
/* prevent text wrapping */
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/* display dropdown on hover */
ul li a:hover + .hidden, .hidden:hover {
display: block;
position: relative;
/* CHANGE: Absolute to relative */
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/* responsive Styles */
@media screen and (max-width : 760px) {
/* make dropdown links appear inline */
ul {
position: static;
display: none;
}
/* create vertical spacing */
li {
margin-bottom: 1px;
}
/* make all menu links full width */
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
opacity: 0.8;
}
.col-narrow {
width: 30%;
float: left;
padding-right: 20px;
}
.col-wide {
width: 70%;
float: left;
padding-left: 20px;
}
}
@media (min-width: 761px){
header {
text-align: center;
}
.profile-img {
width: 200px;
border-radius: 50%;
}
}
/* NAVIGATION MENU END */
/* ///////////////////////////////////////////////////////////// */
/* Global Styles */
/*----------------------------------*/
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: 'Saira Semi Condensed', sans-serif;
margin: 0;
}
h1, h2 {
font-family: 'caveat', cursive;
font-weight: 300;}
h1 {
font-size: 60px;
}
h2 {
font-size: 35px;
margin-top: 0;
}
h3 {
margin: 0;
}
a {
color: #ef233c; /* link color */
}
a:hover {
text-decoration: none;
}
/* content-wrap */
/*----------------------------------*/
.content-wrap {
max-width:1080px; /*90%*/
margin: 0 auto;
padding: 60px 100px; /*35px 25px*/
overflow: hidden; /*auto*/
}
.uppercase {
text-transform: uppercase;
}
/*Download Button styles*/
/*----------------------------------*/
.btn {
text-decoration: none; /*Removes text underline */
background-color: #EF233C;
color: white;
padding: 5px;
display: inline-block;
}
/* Title */
/*----------------------------------*/
.title {
color: white;
}
/* Header & Footer */
/*----------------------------------*/
header, footer {
background: #2b2d42;
color: #8d99ae
}
header {
padding-top: 15px;
position: relative;
text-align: center;
/*is vital for download link position below*/
}
/*header */
/*----------------------------------*/
header h1, header h2{
color: #edf2f4;
margin: 0;
}
.no-wrap-text {
overflow: hidden;
}
/*Prevents the header text paragraph from flowing beneath the image*/
.profile-img {
border-radius: 25%;
float: left;
}
.download {
position: absolute;
bottom: 0;
right: 0;
/* Download controls the download button position */
}
/*footer*/
footer {
text-align: center;
}
.contact-info a {
padding: 8px;
margin: 10px;
display:inline-block;
color: white;
/*Modifies the contact me sections links*/
}
.contact-info a:hover {
color: #4668A5;
/*Highlights the contact info when the cursor is on it for better visability*/
}
/* my Interests*/
/*----------------------------------*/
.interests {
background: #edf2f4;
}
/* Work Experience */
/*----------------------------------*/
.work {
background: #edf2f4;
/*background: linear-gradient(rgba(237, 242, 244, 0.8), rgba(237, 242, 244, 0.5)),
url(../images/Vancouver.jpg) no-repeat fixed;
background-size: cover;*/
}
h3 ~ p {
margin: 0;
}
.job-description {
margin-bottom: 20px;
}
.job-description p:first-of-type {
margin-top: 0;
}
/* job-description is only useful once you add additional jobs, with only a single job
it has no apparent affect.*/
/* Education */
/*----------------------------------*/
.education {
/*background: #8d99ae*/
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)),
url(../images/Vancouver.jpg) no-repeat fixed;
background-size: cover;
}
p + h3 {
margin-top: 20px;
}
/* Added CSS SO here */
.keyQualificationsContainer
{
position:relative;
float:left;
width:100%;
margin:5px 0 0;
}
.qualificationDiv
{
position:relative;
float:left;
width:100%;
margin:0;
padding:5px 0;
}
/* SO to here */<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- NAVIGATION MENU -->
<!-- /////////////////////////////////////////////////////////////- -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">home</a></li>
<!-- will take you back to my resume (front page) -->
<li>
<a href="#">about ￬</a>
<!-- will take you to different sections of the resume page -->
<ul class="hidden">
<li><a href="#interests">Interests</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#education">Education</a></li>
<!-- <li><a href="#">Contact Me</a></li> -->
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<!-- will take you to different pages devoted to different topics -->
<ul class="hidden">
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">Modeling</a></li>
<li><a href="#">Games</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
<!-- NAVIGATION MENU -->
<!-- /////////////////////////////////////////////////////////////- -->
<!-- GARBAGE DATA FOR TESTING -->
<div class="content-wrap">
<img class="profile-img col-narrow" src="images/coffeephoto3-resize.jpg" alt="Raymond Spencer Norton / October 2017">
<div class="col-wide">
<h1 class="title">Raymond Norton</h1>
<h2>Web/Game Developer + Coder</h2>
<p class="no-wrap-text"> As a Full-Stack Web/Game developer I specialize in exceeding all front and back-end
requirements for developing scalable and adaptable applications and games for my customers.<p/>
</div>
</div>
</header>
<main>
<!-- // Start of interests block -->
<section id="interests" class="interests">
<div class="content-wrap">
<h2> My Interests </h2>
<h3> Web Design </h3>
<p> REMOVED CAUSE NOT RELEVANT</p>
<h3> Programming </h3>
<p> REMOVED CAUSE NOT RELEVANT</p>
<h3> Game Development </h3>
<p> </p>
<!-- // end of interests block -->
</div>
</section>
<!-- // Work Experience -->
<section id="work" class="work">
<div class="content-wrap">
<h2>Work Experience</h2>
<!-- Job Details 1: -->
<div class="col-narrow">
<h3>Front-end Website Developer</h3>
<p class="uppercase">Independent / Freelance </p>
<p>Sept 2017 - Present</p>
</div>
<!-- paragraphs. -->
<div class="col-wide job-description">
<p>Provides various front end related services ranging from Website development work,
design consultations, character modelling and animation, scripting in Java, C++ or C# and
game development in Unity and the Unreal Game Engines.</p>
<!-- SO changed hered - from ul-li to div -->
<div classs="keyQualificationsContainer">
<p>Key Qualifications:</p>
<div class="qualificationDiv">Front-end web development for mobile and desktop applications utilizing HTML5, CSS3, Wordpress, Javascript and JQuery</div>
<div class="qualificationDiv">Back-end web development with Javascript, C++, C#, Python</div>
<div class="qualificationDiv">Designing character models in Maya and Blender3D studios.</div>
<div class="qualificationDiv">Game level design in Unity, Unreal engine.</div>
<div class="qualificationDiv">Coding in Visual Studios</div>
</div>
<!-- SO to here -->
<!-- Job Details 2: -->
<div class="col-narrow">
<h3>Indie Game Developer</h3>
<p class="uppercase">Independent </p>
<p>Sept 2017 - Present</p>
</div>
<!-- paragraphs. -->
<div class="col-wide job-description">
<p>I have launched several mobile arcade genre games for IOS and Android.
Some of my most successful game launches include Space-Invaders Reborn(800,000 downloads),
a modern take on a classic arcade game and Traveler(275,000 downloads), an action/adventure
side scrolling game with RPG elements. </p>
<!-- SO changed hered - from ul-li to div -->
<div classs="keyQualificationsContainer">
<p>Key Qualifications:</p>
<div class="qualificationDiv">Successfully launched numerous mobile titles via the IOS App store and Android marketplace.</div>
<div class="qualificationDiv">Developed successful SEO strategies for the launch of my self published titles.</div>
</div>
<!-- SO to here -->
<!-- end of Job Details block. -->
</section>
<!-- // Education section starts-->
<section id="education" class="education">
<div class="content-wrap">
<h2>Education</h2>
<!-- School details. -->
<h3>COLLEGE, BC</h3>
<p>Second Year General Studies - 2014-2016</p>
<!-- paragraphs . -->
<h3>Lynda.com - Online</h3>
<p>CSS & HTML, Java, C++, C# - 2016-2018</p>
<h3>UNIVERSITY, BC</h3>
<p>Diploma of Game Design - 2018-2019</p>
</div>
<!-- End of school details. -->
</section>
<!-- // Education section ends-->
</main>
<!-- // Footer & contact info -->
<footer id="contact">
<div class="content-wrap">
<h2>Contact me</h2>
<p> Please address all business communications to my email.
<!-- Social media and contacts-->
<div class="contact-info">
<a href="mailto:[email protected]"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i>
<span class="sr-only">Email</span></a>
<a href="https://twitter.com/removed"target="_blank"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
<span class="sr-only">Twitter</span></a>
<a href="https://www.linkedin.com/in/removed/"target="_blank"><i class="fa fa-linkedin-square fa-2x"
aria-hidden="true"></i><span class="sr-only">LinkedIn</span></a>
<a href="https://www.facebook.com/removed"target="_blank"><i class="fa fa-facebook-square fa-2x"
aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
</div>
<p>Copyright 2017 by Raymond Norton</p>
</div>
</footer>
</body>
</html>伊万做对了，我用div容器替换了所有重要的东西，它很快就解决了我的问题。