我有<a> links that were working but for some reason have stopped

Question

I have a unordered list in my HTML with 5 lists that all had with links on them that were working fine. It was working fine until I added another unordered list, but i have no links inside it. I even gave it a separate class.

Here is my markup/CSS:

ul {
    margin: 0;
    list-style-type: none;
    color: white;
    diplay: block;
    padding-top: 20px;
    padding-left: 350px;
    font-family: "Economica", sans-serif;
    font-size: 28px;
    text-decoration: none;
}
ul li {
    padding-left: 45px;
    padding-right:45px;
    display: inline;
    text-decoration: none;
}
ul li a:hover {
   font-weight:bold;
   color:grey;
}
a {
   text-decoration: none;
   color:white;
}

<div id="mainPage" >
    <img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px"> 
    <div id="navBar">
        <div id="Logo">
            <h1 style="font-weight:bold;"> Ice Arena </h1>
        </div>
        <ul id="select">
            <li>
                <a style="color:#ffe700;" href="#">Home</a>
            </li>
            <li>
                <a href="#">Gallery</a>
            </li>
            <li>
                <a href="#">Order Form</a>
            </li>
            <li>
                <a href="#">The Arena</a>
            </li>
            <li>
                <a href="#">Contact Us</a>
            </li>
        </ul>
    </div>
</div>

I've only added the code regarding the list and area of my problem.

Answer 1

将position: relative;添加到ul，否则其他元素位于其上方并阻止链接行为。

＆＃13;

＆＃13;

ul {
  margin: 0;
  list-style-type: none;
  color: white;
  diplay: block;
  padding-top: 20px;
  padding-left: 350px;
  font-family: "Economica", sans-serif;
  font-size: 28px;
  text-decoration: none;
  /* added */
  position: relative;
}

ul li {
  padding-left: 45px;
  padding-right: 45px;
  display: inline;
  text-decoration: none;
}

ul li a:hover {
  font-weight: bold;
  color: grey;
}

a {
  text-decoration: none;
  color: white;
}

＆＃13;

<div id="mainPage">
  <img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
  <div id="navBar">
    <div id="Logo">
      <h1 style="font-weight:bold;">Ice Arena</h1>
    </div>
    <ul id="select">
      <li><a style="color:#ffe700;" href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Order Form</a></li>
      <li><a href="#">The Arena</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试删除第3行中的CSS属性（position：absolute;）。