如何将内容放在导航下方。每次我在其中放一些文字时,它都会在绿色背景后面,并被导航遮盖。请帮助我如何将文字放在导航下方
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li><a href="Home.html"> <img src="logo.png"> </img> </a>
<li><a href ="Home.html">Home </a></li>
<li><a href ="Products.html">Products </a>
<li><a href ="about.html">About us </a>
<li><a href ="contact.html">Contact us </a>
</ul>
</head>
<spacer>testing </spacer>
</body>
</html>
最佳答案
如果将以下代码添加到您的代码中:
spacer {
display: block;
margin-top: 75px;
}
一切都会变好。只需添加大于固定菜单高度的页边距。
在此处检查代码段:http://codepen.io/Dzongkha/pen/PbbvLZ