Is there a way to stop a drop down menu from pushing down other elements?-CodePudding

I have a drop down menu, but when I hover over it the list item that pops up pushes the elements below it down further. Is their any way to just let the drop down menu overlap elements below it? I was also wondering if there was any way to make the menu appear when the background color appears on the "Rambling" element.

@font-face {
  font-family: "Chivo Mono";
  src: URL("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  font-family: 'Trebuchet MS';
  color: #777;
}

html,
body {
  margin: 0;
  padding: 0;
}

.emails {
  height: 100px;
  width: 250px;
}

.nav li {
  display: inline-block;
  padding: 0;
}

.header {
  background-color: #A7C7E7;
  background-size: cover;
  padding-bottom: 40px;
  margin-bottom: 20px
}

.nav a {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
}

.nav a:hover {
  background-color: rgba(255, 150, 190, 1);
}

.main-nav {
  text-align: center;
  font-size: 1.7em;
  border-bottom: 3px solid rgba(255, 150, 190, 1)
}

.main-nav li {
  padding: 0 5%;
}

.page-name {
  text-align: center;
  margin: 0;
  font-size: 4em;
  font-family: "Chivo Mono";
  font-weight: normal;
  color: rgba(255, 150, 150, 1);
}

.footer {
  background-color: #A7C7E7;
  margin: 50px 0px;
  padding: 50px 0px;
  border: white;
}

.footer h1 {
  padding: 0px 0px
}

.footer textarea {
  margin-top: 2em;
  width: 400px;
  height: 200px;
}

.body-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5em
}

.footer {
  text-align: center;
  margin-top: 10em;
  margin-bottom: 0em;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.email-button {
  padding: 1em;
}

.article-title h2 {
  text-align: center;
  color: Black;
}

.coming-soon {
  color: white;
}

.nav li {
  color: white;
}

.email-button button {
  background-color: rgba(255, 150, 190, 1);
  color: white;
  padding: 7px 20px;
  font-size: 1.3em;
  border-radius: 10px;
  border: 0px;
  transition-duration: 0.9s;
}

.button:hover {
  background-color: white;
  color: #A7C7E7;
}

nav ul li ul {
  padding-right: 58px;
  display: none;
}

nav ul li:hover ul {
  display: block;
  background-color: rgba(255, 150, 190, 1);
  text-align: center;
  font-size: .6em;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="zuckymuckyboi" />
  <title>Home</title>
  <link rel="stylesheet" href="Resources\styles.css">
  <style>
    p {
      text-align: center;
    }
  </style>
</head>

<body>
  <header >
    <nav >
      <ul>
        <li><strong><a href= "index.html">Home</a></strong></li>
        <li><strong><a>Ramblings</a></strong>
          <ul>
            <li><a href="gunlawramble.html">Gun Laws</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <div>
      <h1 >About</h1>
    </div>
  </header>
  <section >
    <div>
      <p text>To be writen...
        <p>
    </div>
  </section>
  <footer >
    <div>
      <h1>Have Suggestion/Questions?</h1>
    </div>
    <div>
      <textarea  placeholder="Write and email me here!"></textarea>
    </div>
    <div >
      <button function="button" >Send</button>
    </div>
  </footer>
</body>

Here is a video of the problem: https://streamable.com/ftj2e1

I tried to to change margins and padding by making them 0 or negative. It didn't do much. Thanks!

CodePudding user response：

If you want to position elements over each other, you have to use position: absolute;. position: absolute; takes the document out of the document flow. It's now positioned absolutely with reference to the closest parent that has a position: relative; value.

I've played around a little and added some code:

.nav>ul {
  position: relative;
  width: 100%;
  height: 85px;
}

.nav>ul>li {
  position: absolute;
}

.nav>ul>li:first-of-type {
  left: 25%;
}

.nav>ul>li:last-of-type {
  right: 25%;
}

.emails {
  height:100px; width:250px;
}

.nav li {
  display: inline-block;
  padding: 0;
}



.header {
  background-color:#A7C7E7;
  background-size: cover;
  padding-bottom: 40px;
  margin-bottom: 20px
}

.nav a {
  display: inline-block;
  padding:1em;
  color: white;
  text-decoration: none;
  
}

.nav a:hover {
  background-color: rgba(255, 150, 190, 1);
}

.main-nav {
  text-align: center;
  font-size: 1.7em;
  border-bottom: 3px solid rgba(255, 150, 190, 1)
}

.main-nav li {
  padding: 0 5%;
}

.page-name {
  text-align: center;
  margin: 0;
  font-size: 4em;
  font-family: "Chivo Mono";
  font-weight: normal;
  color: rgba(255, 150, 150, 1);
}

.footer {
  background-color: #A7C7E7;
  margin: 50px 0px;
  padding: 50px 0px;
  border: white;
}
.footer h1  {
  padding: 0px 0px
}

.footer textarea {
  margin-top: 2em;
  width: 400px;
  height: 200px;
}

.body-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5em
}

.footer {
  text-align: center;
  margin-top: 10em;
  margin-bottom: 0em;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.email-button {
  padding: 1em;
}

.article-title h2 {
  text-align: center;
  color: Black;
}

.coming-soon {
  color: white;
}

.nav li {
  color: white;
}

.email-button button {
  background-color: rgba(255, 150, 190, 1);
  color: white;
  padding: 7px 20px;
  font-size: 1.3em;
  border-radius: 10px;
  border: 0px;
  transition-duration: 0.9s;  
}

.button:hover {
  background-color: white;
  color: #A7C7E7;
}

nav ul li ul {
  padding-right: 58px;
  display: none;
}

nav ul li:hover ul {
  display: block;
  background-color: rgba(255, 150, 190, 1);
  text-align: center;
  font-size: .6em;
  padding: 0;
  
}

.nav>ul {
  position: relative;
  width: 100%;
  height: 85px;
}
.nav>ul>li {
  position: absolute;
}

.nav>ul>li:first-of-type {
  left: 25%;
}
.nav>ul>li:last-of-type {
  right: 25%;
}

  <header >
    <nav >
        <ul>
            <li><strong><a href= "index.html">Home</a></strong></li>
            <li><strong><a>Ramblings</a></strong>
                <ul>
                    <li><a href= "gunlawramble.html">Gun Laws</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div>
        <h1 >About</h1>
    </div>
</header>
<section >
    <div>
        <p text>To be writen...<p>
    </div>
</section>
<footer >
    <div>
        <h1>Have Suggestion/Questions?</h1>
    </div>
    <div>
        <textarea  placeholder="Write and email me here!"></textarea>
    </div>
    <div >
        <button function="button" >Send</button>
    </div>
</footer>

CodePudding user response：

Yes, you will have to set your dropdown li to position: absolute;.

But first, the ul for the inner dropdown needs to be position: relative;. Then you can make your inner dropdown (li) position: absolute; and set inset: 0; to take the full width. You can see all changes I made under /* added CSS */.

@font-face {
  font-family: "Chivo Mono";
  src: url("Resource/Fonts/ChivoMono-Black.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
  font-family: 'Trebuchet MS';
  color: #777;
}

html,
body {
  margin: 0;
  padding: 0;
}

.emails {
  height: 100px;
  width: 250px;
}

.nav li {
  display: inline-block;
  padding: 0;
}

.header {
  background-color: #A7C7E7;
  background-size: cover;
  padding-bottom: 40px;
  margin-bottom: 20px
}

.nav a {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
}

.nav li:hover {
  background-color: rgba(255, 150, 190, 1);
}

.main-nav {
  text-align: center;
  font-size: 1.7em;
  border-bottom: 3px solid rgba(255, 150, 190, 1)
}

.main-nav li {
  margin: 0 5%;
}

.page-name {
  text-align: center;
  margin: 0;
  font-size: 4em;
  font-family: "Chivo Mono";
  font-weight: normal;
  color: rgba(255, 150, 150, 1);
}

.footer {
  background-color: #A7C7E7;
  margin: 50px 0px;
  padding: 50px 0px;
  border: white;
}

.footer h1 {
  padding: 0px 0px
}

.footer textarea {
  margin-top: 2em;
  width: 400px;
  height: 200px;
}

.body-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5em
}

.footer {
  text-align: center;
  margin-top: 10em;
  margin-bottom: 0em;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.email-button {
  padding: 1em;
}

.article-title h2 {
  text-align: center;
  color: Black;
}

.coming-soon {
  color: white;
}

.nav li {
  color: white;
}

.email-button button {
  background-color: rgba(255, 150, 190, 1);
  color: white;
  padding: 7px 20px;
  font-size: 1.3em;
  border-radius: 10px;
  border: 0px;
  transition-duration: 0.9s;
}

.button:hover {
  background-color: white;
  color: #A7C7E7;
}

nav ul li ul {
  padding-right: 58px;
  display: none;
}

nav ul li:hover ul {
  display: block;
  background-color: rgba(255, 150, 190, 1);
  text-align: center;
  font-size: .6em;
  padding: 0;
}

nav ul li:hover ul {
  display: block;
  background-color: rgba(255, 150, 190, 1);
  text-align: center;
  font-size: .6em;
  padding: 0;
}


/* added CSS */

.inner-item {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.inner-dropdown {
  position: relative;
}

.inner-item>a {
  background-color: #fff;
  border-top: solid 1px #000;
  color: #000;
  width: 100%;
}

.inner-item>a:hover {
  color: #fff;
  background-color: rgba(255, 150, 190, 1);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="zuckymuckyboi" />
  <title>Home</title>
  <link rel="stylesheet" href="Resources\styles.css">
  <style>
    p {
      text-align: center;
    }
  </style>
</head>

<body>
  <header >
    <nav >
      <ul>
        <li><strong><a href= "index.html">Home</a></strong></li>
        <li><strong><a>Ramblings</a></strong>
          <ul >
            <li ><a href="gunlawramble.html">Gun Laws</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <div>
      <h1 >About</h1>
    </div>
  </header>
  <section >
    <div>
      <p text>To be writen...
        <p>
    </div>
  </section>
  <footer >
    <div>
      <h1>Have Suggestion/Questions?</h1>
    </div>
    <div>
      <textarea  placeholder="Write and email me here!"></textarea>
    </div>
    <div >
      <button function="button" >Send</button>
    </div>
  </footer>
</body>