Dropdown menu moves content

html css menu dropdown

10,100

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/

10,100

Author by

Atomix

Updated on August 21, 2022

Comments

Atomix over 1 year

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>

Atomix over 7 years

Thank You for help :) I've added those lines to my code but right now in menu is only one position,just the first one,three others seems to disappear somehow.
David Maness almost 4 years

@Atomix it's probably because you applied the top and left positioning to the same menus, so now they're all stacked on top of each other.