个人中心
gpt4 book ai didi

html - CSS HTML 下拉导航元素显示为内联而不是下方

转载 作者：太空狗 更新时间：2023-10-29 16:35:16 26 4
gpt4 key购买 nike

下面是我的一些代码的 JSFiddle 链接。我试图在不使用 Bootstrap 或其他插件类型的情况下实现一个看起来光滑的纯 html/css 下拉菜单。但是我似乎无法让“创意”下拉元素出现在导航栏下方，它们反而出现在行中，我试图更改代码的其他部分以使其工作但我似乎无法在不影响导航栏其余部分的情况下做到这一点。

如果有人可以看一下，请获取它，这样当您将鼠标悬停在“创意”上时，它的子列表元素就会出现在它的下方。最好没有样式填充和边距。

https://jsfiddle.net/nytnfvmq/

HTML:

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Udemy Project</title>

    <link type="text/css" href="styles.css" rel="stylesheet">

    <script type="text/javascript" src="javascript.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <!--<script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>-->


  </head>

  <body>

    <nav>
      <ul>

        <li>
          <a href="">Home</a>
        </li>

        <li>
          <a href="">Development</a>
        </li>

        <li>
          <a href="">Creative</a>

          <ul>

            <li>
              <a href="">Film</a>
            </li>

            <li>
              <a href="">Design</a>
            </li>

            <li>
              <a href="">Music</a>
            </li>

          </ul>

        </li>

        <li>
          <a href="">Information</a>
        </li>

        <li>
          <a href="">Contact Me</a>
        </li>
      </ul>
    </nav>

    <div id="banner">
      <img src="images/banner.png" alt="Banner image did not load." ;>
    </div>

  </body>

</html>

CSS: * { margin :0； 填充:0； 

body {
  margin: 0;
  padding: 0;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",     Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

nav {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0px 2px 5px #6E6E6E;
  position: fixed;
}

nav ul {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  list-style: none;
  color: #00b6ed;
}

nav ul li a {
  width: 20%;
  display: inline;
  text-align: center;
  float: left;
  padding-top: 11px;
  padding-bottom: 11px;
  color: #00b6ed;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #00b6ed;
  color: #ffffff;
}

nav ul li ul {
  display: none;
  position: relative;
}

nav ul li:hover ul {
  display: block;
  position: relative;
}

#banner {
  width: 100%;
  height: 400px;
  background-color: #00b6ed;
  float: left;
  text-align: center;
}

#banner img {
  margin: 0 auto;
  background-color: #00b6ed;
}

nav ul li ul li a {
  background-color: red;
  color: green;
}

最佳答案

你有一些错误。不要 float anchor 标记并为其指定宽度。而是 float 列表项。您还需要将 position: relative 添加到 li 中，然后添加 position: absolute;左:0； top: 100%; 给 child ul。我认为这应该可以做到。

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}

nav {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0px 2px 5px #6E6E6E;
  position: fixed;
}

nav ul {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  list-style: none;
  color: #00b6ed;
}

nav ul li {
  width: 20%;
  float: left;
  position: relative;
}

nav ul li a {
  display: block;
  text-align: center;
  padding-top: 11px;
  padding-bottom: 11px;
  color: #00b6ed;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #00b6ed;
  color: #ffffff;
}

nav ul li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}

nav ul li:hover ul {
  display: block;
  position: relative;
}

#banner {
  width: 100%;
  height: 400px;
  background-color: #00b6ed;
  float: left;
  text-align: center;
}

#banner img {
  margin: 0 auto;
  background-color: #00b6ed;
}

nav ul li ul li {
  float: none;
}

nav ul li ul li a {
  background-color: red;
  color: green;
}
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Udemy Project</title>

    <link type="text/css" href="styles.css" rel="stylesheet">

    <script type="text/javascript" src="javascript.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <!--<script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>-->


  </head>

  <body>

    <nav>
      <ul>

        <li>
          <a href="">Home</a>
        </li>

        <li>
          <a href="">Development</a>
        </li>

        <li>
          <a href="">Creative</a>

          <ul>

            <li>
              <a href="">Film</a>
            </li>

            <li>
              <a href="">Design</a>
            </li>

            <li>
              <a href="">Music</a>
            </li>

          </ul>

        </li>

        <li>
          <a href="">Information</a>
        </li>

        <li>
          <a href="">Contact Me</a>
        </li>
      </ul>
    </nav>

    <div id="banner">
      <img src="images/banner.png" alt="Banner image did not load." ;>
    </div>

  </body>

</html>

关于html - CSS HTML 下拉导航元素显示为内联而不是下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34911028/

26 4 0
文章推荐： android - CardView 和 RecyclerView 分隔行为
文章推荐： c - 关于声明的螺旋法则——什么时候出错了？
文章推荐： c - RDTSCP 与 RDTSC + CPUID
文章推荐： android - float 操作按钮变形
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com