下拉菜单移动内容

Question

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

我网站上的下拉菜单会移动内容。我曾尝试过使用具有绝对位置和相对位置的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> 

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

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

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