HTML 下拉框搞砸了文本

Question

我有一个使用HTML和CSS的下拉框，但是如果下拉框的任何部分与网页上的文本重叠，文本就会偏移很多。有没有一种方法可以更改我的代码，让方框隐藏文本而不是弄乱格式？

index.html:

<body>
    <div id="header">
      <h1>Kookerus' Projects</h1>
    </div>
    <div id="dropdown">
      <ul>
        <li><a href="http://kookerus.github.io">Home</a></li>
        <li><a href="#">About</a></li>
          <li>
            <a href="/projects/batch-interpreter/index.html">Batch Interpreter &#9662;</a>
            <ul>
              <li><a href="/projects/batch-interpreter/about.html">About</a></li>
              <li><a href="#">View on Github</a></li>
            </ul>
          </li>
        <li><a href="/contact.html">Contact</a></li>
      </ul>
    </div>
</body>

style.css:

#header{
  height: 50px;
  width: 100%;
  background-color: #CC00CC;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  margin-top: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
}
#nav {
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: white;
  margin-top: 50px;
  margin-bottom
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
}
#about{
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0
}
.center { /*simple class to center the text*/
  text-align: center;
  }
h1 {
    margin: 0;
    padding: 0;
    border: 0;
}
ul {
  display: inline;
  padding: 0;
  list-style: none;
}
ul li {
  float: left;
  width: 150px;
  text-align: center;
  line-height: 21px;
}
ul li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  background: #f2f2f2;
  text-decoration: none;
}
ul li a:hover {
  color: #fff;
  background: #939393;
}
ul li ul {
  display: none;
}
ul li:hover ul {
  display: block; /* display the dropdown */
}

> JSFiddle

Answer 1

在您的下拉列表中，ul 使用 position: absolute 并使其父级 li 相对

ul li ul{
  position: absolute;
}
ul li{
position: relative;
}

Answer 2

你也可以用display:flex，"contacts"不在左边跳，而不是display:inline

ul {
 display: flex;
 padding: 0;
 list-style: none;
}

jsfiddle

HTML 下拉框搞砸了文本

HTML dropdown box screwing up text

html

css

drop-down-menu