如何将内容放在导航下方。每次我在其中放一些文字时,它都会在绿色背景后面,并被导航遮盖。请帮助我如何将文字放在导航下方


<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

09-10 10:42
查看更多