Question

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

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

感谢您的帮助和Greets

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 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，您可以管理这些元素的堆栈。

父亲中的位置相对有助于作为顶部和左侧属性的指示物。

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

下拉菜单移动内容

1 个答案: