下拉菜单移动内容答案

【问题标题】：Dropdown menu moves content下拉菜单移动内容
【发布时间】：2017-02-04 10:11:04
【问题描述】：

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

我网站上的下拉菜单移动内容。我尝试了具有绝对和相对位置的 z-index，但没有成功。也许我搞砸了，但现在我不知道是什么

感谢您的帮助和问候

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>

【问题讨论】：

与您的问题无关，但<img id="fest" src="fest.jpg"width=320px height=350px;> 应该是<img id="fest" src="fest.jpg" width="320" height="350" /> 高度和宽度是正常的属性，它们需要引号，分号是不允许的，不需要像素。渲染之所以有效，是因为浏览器做了额外的工作来理解它。
以及<script>src="js/bootstrap.min.js"</script> 我不确定这是否符合您的预期。这一行正在创建一个带有字符串"js/bootstrap.min.js" 的变量src，可能你想要<script src="js/bootstrap.min.js"></script>

标签： html css menu dropdown

【解决方案1】：

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

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

关键是位置：绝对；绝对位置不会移动其他元素。使用绝对位置，您可以将任何页面元素准确定位在您想要的位置，而无需为其保留视觉空间。请注意，您的元素可以位于其他元素之上。使用 z-index，您可以管理这些元素的堆栈。

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

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

【讨论】：

感谢您的帮助 :) 我已将这些行添加到我的代码中，但现在菜单中只有一个位置，只是第一个位置，其他三个似乎以某种方式消失了。
@Atomix 这可能是因为您将顶部和左侧定位应用于相同的菜单，所以现在它们都堆叠在一起了。