我在一些教程的帮助下创建了这个页面,我编辑了代码,在页面中央附加了一个文本框,但文本框与导航菜单混合在一起。一些帮助将不胜感激。我对html和css知之甚少,所以请以简单的方式指导我。我在谷歌上搜索并得到了一篇w3文章,但这并没有帮助,因为我已经在css中使用它,因为你可以看到我已经使用了margin-top,bottom,left和right来解决问题,而是它混合或者将自己与导航菜单重叠。
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}

<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About.html">About</a>
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li><a href="Todo.html">Things to do</a>
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li><a href="Contact.html">Contact</a>
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li><a href="News.html">News</a></li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
&#13;