CSS下拉菜单项未对齐

Question

我的下拉菜单出了问题。我在我的UI线中添加了一个填充，因此我的菜单将在中心对齐，但之后下拉项目将不对齐。我确定问题出在我的CSS中，但我会同时包含HTML和CSS。我被告知这些代码中的一些是多余的，但对于这个问题，我想保留它就像它一样。

＆＃13;

＆＃13;

body {
  background: url('https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg') no-repeat;
  Background-size: cover;
  font-family: arial;
  color: white;
}
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  padding-left:70px;
}
ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: black;
  opacity: 0.8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}
ul li a{
  text-decoration: none;
  color: white;
  display: in-line;
}
ul li a:hover {
  background-color: gray;
}
ul li ul li {
  display: none;
}
ul li:hover ul li {
  display: block;
}

＆＃13;

<htlm>
  <link href='style2.css' rel='stylesheet'>
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a>
      <ul>
        <li><a>About Me</a></li>
        <li><a>About My Project</a></li>
      </ul>
    </li>
    <li><a>Gallery</a></li>
    <li><a>Contact</a></li>
    <li><a>News</a>
      <ul>
        <li><a>Tech News</a></li>
        <li><a>World News</a></li>
        <li><a>Science News</a></li>
      </ul>
    </li>
    <li><a>Lessons</a></li>
  </ul>
</html>

＆＃13;

＆＃13;

＆＃13;