Question

我是HTML和CSS的新手，现在我正在关注this教程。我的问题see picture是我的下拉列表中的项目不在垂直行中，而是一起混乱。

我确信这是一个简单的解决方案，但我找不到任何进展......

我会很感激一些建议！：）

* {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 10px;
}

/* ----- NAVIGATION BAR ----- */

#nav {
  width:500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  background-color: none;
}

#nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}

#nav ul:after{
  content: "";
  clear: both;
  display: block;
}

#nav ul li {
  float: left;
}

#nav ul li a {
    display: block;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    font-family: "Trocchi", serif;
}

#nav ul li:hover {
  background: #76C5CF;
}

#nav ul li:hover a {
  color: white;
}

#nav ul ul {
  display: none;
  background: none;
  position: absolute;
  top: 100%;
}

#nav ul li:hover > ul {
  display: block;
}

/* ----- HEADER ----- */

#header {
  width: 340px
  margin: auto;
  margin-top: 10px;
  text-align: center;
}

#header h1 {
  height: 50px;
  font-family: "Trocchi", serif;
  background-color:
}

#header h2 {
  font-family: "Trocchi", serif;
  position: relative;
  display: inline;
}

/* ----- BACKGROUND ----- */
body {
  background-color: #A6D7F3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title> Harley's Haunts </title>
  <link rel="stylesheet" type="text/css" href="harleysHaunts.css">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Trocchi');
  </style>
</head>

  <body>

      <div id="header">

        <h1> HARLEY'S HAUNTS </h1>
        <h2> It's a dog's world after all </h2>

      </div>

      <div id="nav">
        <ul>
          <li><a href="#"> About </a></li>
          <li><a href="#"> Pet-Friendly Venues </a>
            <ul>
              <li><a href="#"> Cafes </a> </li>
              <li><a href="#"> Restaurants </a> </li>
              <li><a href="#"> Pubs/Bars </a> </li>
              <li><a href="#"> Shops </a> </li>
            </ul>
          </li>
          <li><a href="#"> Contact </a></li>
        </ul>


      </div>

  </body>

</html>

Answer 1

您所要做的就是将position:relative添加到#nav ul li：

#nav ul li {
        float: left;
        position: relative;
    }

但是你应该只为li父母使用它，你不应该在ul孩子的li中使用float:left。

所以 css 会变成这样

#nav > ul > li {
     float: left;
     position: relative;
}

Answer 2

为#nav ul ul添加特定宽度，考虑到父ul width

，为其提供了200px的示例

* {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 10px;
}

/* ----- NAVIGATION BAR ----- */

#nav {
  width:500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  background-color: none;
}

#nav ul {
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}

#nav ul:after{
  content: "";
  clear: both;
  display: block;
}

#nav ul li {
  float: left;
}

#nav ul li a {
    display: block;
    padding: 10px 20px;
    color: black;
    text-decoration: none;
    font-family: "Trocchi", serif;
}

#nav ul li:hover {
  background: #76C5CF;
}

#nav ul li:hover a {
  color: white;
}

#nav ul ul {
  display: none;
  background: none;
  position: absolute;
  top: 100%;
  width: 200px;
}

#nav ul li:hover > ul {
  display: block;
}

/* ----- HEADER ----- */

#header {
  width: 340px
  margin: auto;
  margin-top: 10px;
  text-align: center;
}

#header h1 {
  height: 50px;
  font-family: "Trocchi", serif;
  background-color:
}

#header h2 {
  font-family: "Trocchi", serif;
  position: relative;
  display: inline;
}

/* ----- BACKGROUND ----- */
body {
  background-color: #A6D7F3;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title> Harley's Haunts </title>
  <link rel="stylesheet" type="text/css" href="harleysHaunts.css">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Trocchi');
  </style>
</head>

  <body>

      <div id="header">

        <h1> HARLEY'S HAUNTS </h1>
        <h2> It's a dog's world after all </h2>

      </div>

      <div id="nav">
        <ul>
          <li><a href="#"> About </a></li>
          <li><a href="#"> Pet-Friendly Venues </a>
            <ul>
              <li><a href="#"> Cafes </a> </li>
              <li><a href="#"> Restaurants </a> </li>
              <li><a href="#"> Pubs/Bars </a> </li>
              <li><a href="#"> Shops </a> </li>
            </ul>
          </li>
          <li><a href="#"> Contact </a></li>
        </ul>


      </div>

  </body>

</html>

Answer 3

您已经为ul父级的所有子级应用了规则CSS，因此所有 ul ul 的子级都将继承父CSS的规则。

尝试使用选择器参考＆＃39; ＆gt; ＆＃39;当你想只定位父元素

时

对于这个例子，你只需要改变

#nav ul li {
  float: left;
}

通过

#nav > ul >li {
 float: left;
}

CSS - 悬停ul项不在垂直线上

3 个答案: