个人中心
gpt4 book ai didi

html - 子菜单项在导航中与主菜单重叠

转载 作者：行者123 更新时间：2023-11-28 16:05:43 24 4
gpt4 key购买 nike

我是 CSS 新手。我正在尝试制作一个包含子元素的导航菜单，但我想我遗漏了一些东西。子项与主项重叠。

所以我认为顶部列表项是 float 的，因此从正常内容流中删除。这意味着我需要在之后清除 float ，以便子项显示在主项下。

但它对我不起作用..任何想法

https://jsfiddle.net/madubuko/szqk5be9/ 

<body>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">News</a>
                    <ul>
                        <li><a>Football News</a></li>
                        <li><a>Team News</a></li>
                        <li><a>Players News</a></li>
                        <li><a>Other News</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About us</a></li>
            </ul>
        </nav>
    </div>
</body>

最佳答案

请用您的旧代码替换此代码:

* {
  padding: 0px;
  margin: 0px;
}

body {
  background-image: url("../images/background.jpeg");
}

#container {
  width: 100%;
}
nav {}

#container nav ul {
  list-style: none;
}

#container nav ul li {
  float: left;
  width: 100px;
  height: 40px;
  color: white;
  background-color: black;
  text-align: center;
  border-right: solid #fff 1px;
  border-bottom: solid #fff 1px;
  padding-top: 7px;
  opacity: 0.8;
   position: relative;
}

#container nav ul li a {
  color: white;
  text-decoration: none;
  display: block;
}

#container nav ul li ul li {
  clear: both;
}
#container nav ul li ul {
    position: absolute;
    top: 100%;
    display: none;
}
#container nav ul li:hover ul{
  display:block;
}
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/corecss.css" type="text/css">
  </head>
  <body>
    <div id="container">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">News</a>
            <ul>
              <li><a>Football News</a></li>
              <li><a>Team News</a></li>
              <li><a>Players News</a></li>
              <li><a>Other News</a></li>
            </ul>
          </li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About us</a></li>
        </ul>
      </nav>
    </div>
  </body>
</html>

关于html - 子菜单项在导航中与主菜单重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44326929/

24 4 0
文章推荐： html - CSS 对齐彼此相邻的元素居中
文章推荐： css - 伪元素using::before overflow的父元素高度
文章推荐： html - 多个不同大小的背景图像
文章推荐： html - Bootstrap 不包装没有大小的列