Ato*_*mix 3 html css menu dropdown
我的问题很简单，但我不知道我做错了什么..
我网站上的下拉菜单移动内容。我尝试了具有绝对和相对位置的 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>在您的 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/