HTML/CSS文本框与导航菜单重叠问题求助

Hey there! Let's fix that overlapping navigation and text box issue step by step—no confusing jargon, I promise 😊

Why the overlap is happening #

Your navigation menu uses float: left on the <li> elements. Floated elements "break out" of the normal page flow, which means the parent <ul> doesn't automatically take up space around them (it acts like it has no height!). So when you added margin-top to your text box, it's measuring from the top of the page, not the bottom of the navigation menu—hence the overlap.

Simple fix (2 easy steps) #

Step 1: Fix the navigation's layout

Add overflow: hidden; to your <ul> styles. This forces the <ul> to wrap around all its floated <li> items, giving it a proper height so the rest of the page knows to sit below it.

Step 2: Adjust the text box's spacing (optional but helpful)

You can tweak the margin-top value on your .transbox to get the perfect gap between the navigation and text box—no need for that large 200px value anymore.

Updated CSS code #

body { 
  background: url('nature.jpg') no-repeat; 
  background-size: cover; 
  font-family: Arial; 
  color: white; 
}
ul { 
  margin: 0px; 
  padding: 0px; 
  list-style: none; 
  overflow: hidden; /* This fixes the float issue! */
}
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: 50px; /* Adjust this to your preferred spacing */
  margin-bottom: 100px; 
  margin-right: 150px; 
  margin-left: 80px; 
}
div.transbox p { 
  margin: 5%; 
  font-weight: bold; 
  color: #000000; 
}

Updated HTML code (no changes needed here, but included for completeness) #

<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>

Quick check #

After replacing your code with this, the text box should sit neatly below the navigation menu. If you want more or less space between them, just adjust the margin-top value in .transbox to whatever feels right!

内容的提问来源于stack exchange，提问作者touqeer