html5和css链接干扰

Question

我是这个（css）的新手，我正在努力建立一个带有HTML和CSS的小网站。我有一个问题，在我的页面左侧，我有我的外部页面链接。在我的页面中间，我在一个部分中有一个段落，但这段似乎干扰了我的链接。一些链接不会让我点击它们。

这是我的css，有人可以告诉我，我在做错了吗？

body  {
  color: white;
  background-color: black;
  font-family: Verdana, Geneva, sans-serif;
}

header {
  border: 5px solid blue;
}

table, th, td {
  border: 1px solid white;
}

section {
  font-family: arial;
  font-size: 15px;
  text-align: center;
  padding: 70px;
  left: 0; 
  margin: auto;
  margin-top: -100px;
  position: absolute;
  top: 50%;
  width: 100%;
}

nav ul {
  padding: 15px;
  line-height: 3em;
  list-style-type: none;
}

nav ul li a {
  color: white;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

nav ul li:hover {
  list-style-image: url(download.png);
}

nav ul li a:hover {
  color: rgba(255, 255, 255, 1);
}

Answer 1

http://codepen.io/davidatthepark/pen/jVLNbv?editors=1100

看看我上面的链接。我把边框放入，这样你就可以看到发生了什么。我敢肯定你已经猜到了，但section正在覆盖nav。将元素并排放置的好方法是使用display: inline-block。确保查找display选择器，因为它对编写CSS至关重要。我所做的只是使nav的宽度为30％，section为65％，这样它们就不会超过100％，然后给它们两个display: inline-block。希望有道理！