0
我正在学习网页设计。我试图使我的知识页面。该页面是植物文本。这是代码。固定位置菜单重叠
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Sample Site</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href='#whatwedo'>What We Do?</a></li>
<li><a href='#vision'>Our Vision</a></li>
<li><a href='#work'>Our Work</a></li>
<li><a href='#customer'>Our Proud Customers</a></li>
<li><a href='#testimonial'>Testimonials</a></li>
<li><a href=''>Blog</a></li>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
</nav>
</header>
<div id='whatwedo'>
<h1>What We Do?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id='vision'>
<h1>Our Vision</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'work'>
<h1>Our Work</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'customer'>
<h1>Our Proud Customers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = "testimonial">
<h1> Testimonials</h1>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
</div>
<footer>
<nav>
<ul>
<li><a href=''>Sales Company</a></li>
<li><a href=''>Local Resellers</a></li>
<li><a href=''>Special Orders</a></li>
<li><a href=''>Comapny Officies</a></li>
<li><a href=''>Subsidiaries</a></li>
</ul>
</nav>
</footer>
</body>
</html>
以下是css文件。
html {
font-size: 100%;
line-height: 1.8em;
}
* {
box-sizing: border-box;
border-color: white;
}
/*
Navigation
*/
nav ul{
position: fixed;
top: 0%;
}
nav ul li{
float: left;
margin: 1em 0.5em;
list-style: none;
}
#whatwedo {
clear: left;
margin-top: 8em;
}
/* Navigation Ends
*/
background {
background-color: white;
}
blockquote:before {
content: "''";
}
blockquote:after {
content: "''";
}
#testimonial {
text-align: center;
}
当我打开网页时，我的固定位置菜单被重叠。我不希望它重叠。
top: 0%;
从这个：
nav ul{
position: fixed;
top: 0%;
}
请你帮我一下是什么导致了这个错误，当我删除此行的重叠得到纠正。添加该行时，菜单会重叠，并且在删除该行时，菜单会下降并出现在其他内容的前面。请纠正它并向我解释问题。
创建一个小提示以清楚说明并可帮助您修复 – winresh24
是否要导航保持*固定*？ – Aziz
是的。我希望它保持不变。 –