Menu
My problem is quite simple but i don't know what i've done bad..
Dropdown menu on my site moves content.I've tried a z-index with absolute and relative position but it did not worked.Maybe i've screwed something up but right now i don't know what
Thanks for help and Greets
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>
843
asked Sep 16 '25 18:09
In your css add this styles to the current ones.
.element {
position: relative;
}
.menu>ul>li>ul {
position: absolute;
background-color: #555;
width: 100%;
left: 0;
top: 100%;
z-index: 1;
}
The key is the position: absolute; The position absolute don't move other elements. With position absolute you can positioning any page element exactly where you want it without reserve visual space for it. This mind that your element can be on top of other elements. With z-index you can manage the stack of this elements.
The position relative in the parent will help as a referent for the top and left properties.
I highly recommend to you read this article: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
