Arborem Arborem - 3 years ago 205
CSS Question

Where to put the "position: relative;"?

I found out, that for my dropdown menu to show, I have to add position: relative to my css. But no matter where I add it, it gets displayed like this (with the navbar increasing its width. See the picture:

image

Code:



*,
*::before,
*::after {
box-sizing: border-box;
}

body {
background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
background-size: cover;
min-height: 2000px;
color: #000305;
font-size: 100%;
font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
line-height: 1.5;
}

a {
text-decoration: none;
color: #CF5C3F;
}

.mainHeader {
width: 90%;
margin: 0 auto;
}

.mainHeader nav {
background-color: #9cb34f;
border-radius: 5px;
}

.mainHeader nav ul {
list-style: none;
margin: 2em;
padding: 0;
}

nav:first-of-type ul {
display: flex;
flex-flow: row wrap;
}

nav:first-of-type li {
flex: 1 0 15em;
padding: 0.125em;
}

nav a {
display: block;
padding: 1em;
transition: all linear 0.15s;
text-decoration: inherit;
}

.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #fff;
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
background-color: #CF5C3F;
text-shadow: none;
}

.mainHeader nav ul li a {
border-radius: 5px;
}

.menu li:hover .sub-menu {
position: relative;
z-index: 1;
opacity: 1;
}

.menu .arrow {
font-size: 11px;
line-height: 0%;
}

.sub-menu {
width: 140%;
padding: 1em;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #CF5C3F;
}

.sub-menu li {
display: block;
font-size: 16px;
}

.sub-menu li a {
padding: 10px 30px;
display: block;
}

.sub-menu li a:hover {
background: #3e3436;
}

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

<head>
<meta charset="utf-8">
<title>Couture Anni</title>
<link rel="stylesheet" type="text/css" href="resources/css/ionicons.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<header class="mainHeader">
<img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
<img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li>
<a href="#">Movies <span class="arrow">&#9660;</span></a>

<ul class="sub-menu">
<li><a href="#">In Cinemas Now</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">On DVD/Blu-ray</a></li>
<li><a href="#">Showtimes &amp; Tickets</a></li>
</ul>
</li>
<li><a href="#">T.V. Shows</a></li>
<li><a href="#">Site Help</a></li>
</ul>
</nav>
</div>


<p class="Schneiderei"><strong>Schneiderei<br>&amp; Handwerk</strong></p>

<p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>

<p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>

</header>

<footer class="mainFooter">

<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>

</footer>

</body>


</html>





I just don't get how I prevent the navbar from increasing its width, when the dropdown is shown.

Answer Source

Try This:

.mainHeader nav ul li {
    position: relative;
}

.menu li:hover .sub-menu {
  position: absolute;
  //more code...
}

.sub-menu {
  top:1.7em;
  left: -1.8em;
  //more code...
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
  background-size: cover;
  min-height: 2000px;
  color: #000305;
  font-size: 100%;
  font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: #CF5C3F;
}

.mainHeader {
  width: 90%;
  margin: 0 auto;
}

.mainHeader nav {
  background-color: #9cb34f;
  border-radius: 5px;
}

.mainHeader nav ul {
  list-style: none;
  margin: 2em;
  padding: 0;
}
.mainHeader nav ul li {
	position: relative;
}

nav:first-of-type ul {
  display: flex;
  flex-flow: row wrap;
}

nav:first-of-type li {
  flex: 1 0 15em;
  padding: 0.125em;
}

nav a {
  display: block;
  padding: 1em;
  transition: all linear 0.15s;
  text-decoration: inherit;
}

.mainHeader nav a:link,
.mainHeader nav a:visited {
  color: #fff;
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}

.mainHeader nav ul li a {
  border-radius: 5px;
}

.menu li:hover .sub-menu {
  position: absolute;
  z-index: 1;
  opacity: 1;
}

.menu .arrow {
  font-size: 11px;
  line-height: 0%;
}

.sub-menu {
  width: 140%;
  padding: 1em;
  position: absolute;
  top:1.7em;
  left: -1.8em;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #CF5C3F;
}

.sub-menu li {
  display: block;
  font-size: 16px;
}

.sub-menu li a {
  padding: 10px 30px;
  display: block;
}

.sub-menu li a:hover {
  background: #3e3436;
}
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>Couture Anni</title>
  <link rel="stylesheet" type="text/css" href="css/1.css">
  <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header class="mainHeader">
    <img class="Logo" src="resources/img/Content%5Cvariation_800_e.png" alt="Logo">
    <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter">

    <div class="menu-wrap">
      <nav class="menu">
        <ul class="clearfix">
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Movies <span class="arrow">&#9660;</span></a>

            <ul class="sub-menu">
              <li><a href="#">In Cinemas Now</a></li>
              <li><a href="#">Coming Soon</a></li>
              <li><a href="#">On DVD/Blu-ray</a></li>
              <li><a href="#">Showtimes &amp; Tickets</a></li>
            </ul>
          </li>
          <li><a href="#">T.V. Shows</a></li>
          <li><a href="#">Site Help</a></li>
        </ul>
      </nav>
    </div>


    <p class="Schneiderei"><strong>Schneiderei<br>&amp; Handwerk</strong></p>

    <p class="Willkommen"><strong>Willkommen auf meiner Homepage.<br>Schön, dass Sie mich gefunden haben!</strong></p>

    <p class="inBearbeitung"><strong>Diese Seite ist unter Bearbeitung.<br>Bis demnächst!</strong></p>

  </header>

  <footer class="mainFooter">

    <p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>

  </footer>

</body>


</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download