CSS - 悬停在垂直线上的 ul 项目答案

【问题标题】：CSS - hover ul items not in vertical lineCSS - 悬停在垂直线上的 ul 项目
【发布时间】：2017-04-06 06:56:06
【问题描述】：

我是 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>

【问题讨论】：

尝试使用inline-block 而不是inline-table。
不幸的是，这并不能解决问题。不过谢谢你的建议！原来我需要在我的“#nav ul li {”下添加“位置：相对”

标签： css hover html-lists block unordered

【解决方案1】：

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

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

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

#nav ul li {
  float: left;
}

通过

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

【讨论】：

【解决方案2】：

您所要做的就是将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;
}

【讨论】：

它成功了——万岁！ :D 非常感谢你这么快回答我的问题！！
不客气......如果有帮助的话！您可以将其标记为答案:)。
完成！我不得不等待 7 分钟倒计时：P
我编辑了我的答案.. 你可以看到问题出在 float 属性中：D

【解决方案3】：

为#nav ul ul添加一个特定的宽度，以200px为例，考虑到父ulwidth

* {
  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>

【讨论】：

谢谢！这也奏效了！我现在有两个工作建议 1. #nav > ul > li { float: left;位置：相对； 2. 给#nav ul ul 加上一个特定的宽度，一个比另一个有什么特别的好处吗？
坦率地说，它们都是 1 行代码修改，所以这完全取决于你 :)
明白了；）谢谢你，赛登！