下拉菜单移动内容

Question

我的问题很简单，但我不知道我做错了什么..

我网站上的下拉菜单移动了 content.I我尝试过使用绝对和相对位置的 z-index，但没有成功 worked.Maybe我搞砸了，但现在我没有知道什么

感谢您的帮助和问候

body {
  font-family: 'Segoe UI', sans-serif;
}
#logo {
  margin-top: 15px;
  margin-left: 10px;
  float: left;
  font-size: 30px;
  color: white;
}
.menu>ul {
  list-style-type: none;
  width: 100%;
  background-color: #333;
  min-height: 130px;
}
#fest {
  margin-left: 280px;
}
#pierwszy {
  clear: both;
}
.element {
  width: 120px;
  height: auto;
  display: inline-block;
  padding: 10px;
  color: white;
  text-align: center;
  font-size: 20px;
}
.menu>ul>li {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}
.element:hover {
  background-color: #555;
  cursor: pointer;
}
.menu>#logo>p {
  font-size: 40px;
  color: white;
}
a {
  text-decoration: none;
  color: white;
}
.menu>ul>li>ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: none;
}
.menu>ul>li:hover>ul {
  display: block;
}
.menu>ul>li:hover>ul:hover>li:hover {
  display: block;
  background-color: #666;
}
.menu>ul>li>ul>li {
  margin: 10px;
}
.jumbotron {
  background-color: white;
}

<!DOCTYPE HTML>
<html lang="pl">
<head>
  <meta charset="utf-8" />
  <title>
    LOREN IPSUM DZIADU !
  </title>
  <meta name="description" content="nananananana moje testy i zabawy" />
  <meta name="keywords" content="moje,nowe,zabawy,strony,html" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="css/bootstrap.css">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <div id="topbar">

    <div id="logo">
      <a href="index.html">
        <img src="developer.png" width=220px height=90px;>
      </a>
    </div>
    <nav class="menu">
      <!--<img src="pan.jpg" alt=" "!-->
      <ul>
        <li class="element"><a href="#">Something</a>
          <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
          </ul>
        </li>

        <li class="element"><a href="#">Something</a>
          <ul>
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>

          </ul>
          <li class="element">Something</li>
          <li class="element">Something</li>
      </ul>

    </nav>
    <br/>
    <br/>

  </div>
  </div>
  <article>
    <img id="fest" src="fest.jpg" width=320px height=350px;>
    </a>
    <p>Proin vel luctus urna, a suscipit lectus. Quisque aliquam sollicitudin feugiat. In et venenatis nisl, at mattis arcu. Quisque dictum posuere dui eu luctus. Quisque dignissim ipsum orci, sed malesuada nibh posuere quis. Vestibulum venenatis hendrerit
      enim a scelerisque. Integer fringilla diam et mauris viverra, eget ornare eros faucibus. Phasellus id ex vitae lacus porta pulvinar.</p>
  </article>
  <article>
    <p>Mauris urna sapien, molestie quis vulputate et, interdum vitae massa. Suspendisse dolor velit, imperdiet eu bibendum vitae, finibus quis lorem. Morbi ultricies lorem quis dui hendrerit luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Duis scelerisque varius leo. Quisque malesuada tortor id risus posuere, sodales rutrum nunc tristique. Vivamus pulvinar id leo ut fringilla.</p>
  </article>
  <!-- Latest compiled and minified JavaScript -->
  <script>
    src = "js/bootstrap.min.js"
  </script>
</body>

Answer 1

在您的 css 中将此样式添加到当前样式中。

.element {
 position: relative;
}
.menu>ul>li>ul {
    position: absolute;
    background-color: #555;
    width: 100%;
    left: 0;
    top: 100%;
    z-index: 1;
}

关键是position: absolute;该位置绝对不会移动其他元素。使用绝对位置，您可以将任何页面元素准确定位到您想要的位置，而无需为其保留视觉 space。请记住，您的元素可以位于其他元素之上。使用 z-index 您可以管理此元素的堆栈。

父级中的相对位置将有助于作为 top 和 left 属性的引用。

强烈推荐您阅读这篇文章： https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

下拉菜单移动内容

Dropdown menu moves content

html

css

menu

dropdown