CSS

Question

我是 HTML 和 CSS 的新手，现在我关注的是 this tutorial. My problem 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 的所有子级都将继承父级 [=24= 的规则].

当您只想定位父元素时，请尝试使用选择器引用“>”

对于这个例子，您只需更改

#nav ul li {
  float: left;
}

来自

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

CSS - 将 ul 项目悬停在垂直线上

CSS - hover ul items not in vertical line

hover

html-lists

block

unordered