CSS - 将 ul 元素悬停在垂直线上-6ren

CSS - 将 ul 元素悬停在垂直线上

转载作者：太空宇宙更新时间：2023-11-04 09:31:32

24

4

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

最佳答案

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

关于CSS - 将 ul 元素悬停在垂直线上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40744580/

24

4

0

文章推荐： python - 在 utf8 中迭代两个数据帧的列和 str.encode

文章推荐： python - 这种用法不正确吗？

文章推荐： java - 如何使用 AmazonSQSExtendedClient 从 SQSEvent 接收数据

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

CSS - 将 ul 元素悬停在垂直线上