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

在你的下拉列表中使用position：absolute并使其父li相对

construct

Answer 2

您也可以使用display：flex表示“联系人”没有跳到左侧，而不是显示：inline

 #page-content {
    position: absolute;
    top: 100px;
    z-index: 100;
    padding-left: 20%;
    padding-right: 20%;
}

jsfiddle

HTML下拉框搞砸了文本

2 个答案: