Popup menu messes up page margins-CodePudding

I'm designing a webpage for a local bussiness. The problem i face is that the popup menu that i created keeps being placed outside the margins of the page. If you click the last item from the top bar a menu pops up but not within the margins of the page. The code is below so you can reproduce the problem exactly:

HTML

    <!DOCTYPE html>
    <html lang="el">
        <head>
            <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto Slab:wght@600&display=swap" rel="stylesheet"> 
        <meta charset="UTF-8">
        <meta name="description" content="">
        <link rel="stylesheet" href="mystyle.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>

        <div id="SLIDE_BG">
            
        </div>

        <div id="wrapper">

            <div id="background">

                <div id="menu">
                    <ul>
                        <li><a href="#">Αρχική</a></li>
                        <li><a href="#">Γάμος</a></li>
                        <li><a href="#">Βάπτιση</a></li>
                        <li><a href="#">Καλλιτεχνική</a></li>
                        <li><a href="#">Βίντεο Κλιπ</a></li>
                        <li><a href="#" id="social">Επικοινωνία</a></li>
                    </ul>
                </div>

                <script> 
                    $(document).ready(function(){
                      $("#social").click(function(){
                        $("#social-media-wrapper").toggle(3000);
                      });
                    });
                </script>

                <div id="logo-wrapper">

                    <div id="logo-area">
    
                        <img src="logo.jpg" id="logo-image">
    
                    </div>
                        
                </div>

            </div>

        </div>

        <div id="social-media-wrapper">

            <ul id="social-media-container">

                <li><a href="https://www.instagram.com/efraimidis_photography/"><p ></p></a>&nbsp;&nbsp;</li>
                <li><a href="https://www.facebook.com/Ευφραιμίδης-photography-2116065648685396"><p ></p></a>&nbsp;&nbsp;</li>
                <li><a href="mailto:[email protected]"><p ></p></a></li>

                <li id="phone-number">

                    <span>Τηλέφωνο:&nbsp;<a href="tel:2321553290">2321553290</a></span>
                    <span>Κινητό:&nbsp;<a href="tel:6996405521">6996405521</a></span>

                </li>
                
            </ul>

        </div>

    </body>
</html>

CSS

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
}


#SLIDE_BG {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    animation: slideBg 24s linear infinite 3s;
    animation-timing-function: ease-in-out;
    background-image: url('096.jpg');
  }
  
  @keyframes slideBg {
    0% {
      background-image: url('096.jpg');
    }
    12.5% {
      background-image: url('227.jpg');
    }
    25% {
      background-image: url('1436.jpg');
    }
    37.5% {
      background-image: url('2158.jpg');
    }
    50% {
      background-image: url('2250.jpg');
    }
    62.5% {
      background-image: url('096.jpg');
    }
    75% {
      background-image: url('227.jpg');
    }
    87.5% {
      background-image: url('1436.jpg');
    }
  }

  #background {
    background-color: black;
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;

    overflow-x: hidden;
    opacity: 0.8;
}

#menu{
    position: relative;
    float: right;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#menu li{
  float: left;
}

#menu ul{
  list-style-type: none;
}

#menu a {
    color: white;
    padding:16px;
    text-align: center;
    min-width: 200px;
    border-style: none;
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: larger;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }


#menu a:hover{
    background-color: rgb(204, 198, 198);
}

#social-media-wrapper{
  top: 60px;
  position: relative;
  display: none;
}

#social-media-container {
  position: absolute;
  font-size: 30px;
  text-align: center;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#social-media-container p {
  text-decoration: none;
  color: rgb(255, 255, 255);
  margin-top: 15px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#social-media-container p:hover{

  opacity: 0.7;
}

#phone-number
{
  align-self: center;
  text-align: center;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  line-height: 30px;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}

#phone-number span
{
  margin-top: 40px;
}

#phone-number a
{
  text-decoration: none;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}

#logo-wrapper{
    width: 200px;
    height: 55px;
    overflow: hidden;
    z-index: 2;
    float: left;
}

#logo-image{
    width: 100%;
    height: auto;
    margin: -42px 0 0 -18px;
}

CodePudding user response：

If there is no positioned ancestor to an absolute positioned element, it uses the document body, and moves with the page scrolling.

Place the '#social-media-wrapper' div inside the '#wrapper' div and change it's position property to 'absolute'. Remove '#social-media-container' div's positioning styles. Make the '#wrapper' div, position: relative;

#wrapper {
  position: relative;
}

#social-media-wrapper{
  display: none;
  position: absolute;
  top: 60px;
  right: 0;
}

So that it will be positioned relative to the '#wrapper' div (instead of positioned relative to the document body).

This will solve your problem temporarily (not a good practice).. There are much cleaner ways to create menus/navs with dropdowns (if you don't want to use libraries: https://codepen.io/andornagy/pen/xhiJH)

$(document).ready(function(){
                      $("#social").click(function(){
                        $("#social-media-wrapper").toggle(500);
                      });
                    });

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
}


#SLIDE_BG {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    animation: slideBg 24s linear infinite 3s;
    animation-timing-function: ease-in-out;
    background-image: url('096.jpg');
  }
  
  @keyframes slideBg {
    0% {
      background-image: url('096.jpg');
    }
    12.5% {
      background-image: url('227.jpg');
    }
    25% {
      background-image: url('1436.jpg');
    }
    37.5% {
      background-image: url('2158.jpg');
    }
    50% {
      background-image: url('2250.jpg');
    }
    62.5% {
      background-image: url('096.jpg');
    }
    75% {
      background-image: url('227.jpg');
    }
    87.5% {
      background-image: url('1436.jpg');
    }
  }

  #background {
    background-color: black;
    height: auto;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;

    overflow-x: hidden;
    opacity: 0.8;
}

#menu{
    position: relative;
    float: right;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#menu li{
  float: left;
}

#menu ul{
  list-style-type: none;
}

#menu a {
    color: white;
    padding:16px;
    text-align: center;
    min-width: 100px;
    border-style: none;
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: larger;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }


#menu a:hover{
    background-color: rgb(204, 198, 198);
}

#wrapper {
  position: relative;
}

#social-media-wrapper{
  top: 60px;
  position: absolute;
  display: none;
  right: 0;
}

#social-media-container {
  font-size: 30px;
  text-align: center;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#social-media-container p {
  text-decoration: none;
  color: rgb(255, 255, 255);
  margin-top: 15px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#social-media-container p:hover{

  opacity: 0.7;
}

#phone-number
{
  align-self: center;
  text-align: center;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  line-height: 30px;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}

#phone-number span
{
  margin-top: 40px;
}

#phone-number a
{
  text-decoration: none;
  color: white;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
}

#logo-wrapper{
    width: 200px;
    height: 55px;
    overflow: hidden;
    z-index: 2;
    float: left;
}

#logo-image{
    width: 100%;
    height: auto;
    margin: -42px 0 0 -18px;
}

<!DOCTYPE html>
    <html lang="el">
        <head>
            <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto Slab:wght@600&display=swap" rel="stylesheet"> 
        <meta charset="UTF-8">
        <meta name="description" content="">
        <link rel="stylesheet" href="mystyle.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>

        <div id="SLIDE_BG">
            
        </div>

        <div id="wrapper">

            <div id="background">

                <div id="menu">
                    <ul>
                        <li><a href="#">Αρχική</a></li>
                        <li><a href="#">Γάμος</a></li>
                        <li><a href="#">Βάπτιση</a></li>
                        <li><a href="#">Καλλιτεχνική</a></li>
                        <li><a href="#">Βίντεο Κλιπ</a></li>
                        <li><a href="#" id="social">Επικοινωνία</a></li>
                    </ul>
                </div>

                <div id="logo-wrapper">

                    <div id="logo-area">
    
                        <img src="logo.jpg" id="logo-image">
    
                    </div>
                        
                </div>

            </div>
            
            <div id="social-media-wrapper">

            <ul id="social-media-container">

                <li><a href="https://www.instagram.com/efraimidis_photography/"><p ></p></a>&nbsp;&nbsp;</li>
                <li><a href="https://www.facebook.com/Ευφραιμίδης-photography-2116065648685396"><p ></p></a>&nbsp;&nbsp;</li>
                <li><a href="mailto:[email protected]"><p ></p></a></li>

                <li id="phone-number">

                    <span>Τηλέφωνο:&nbsp;<a href="tel:2321553290">2321553290</a></span>
                    <span>Κινητό:&nbsp;<a href="tel:6996405521">6996405521</a></span>

                </li>
                
            </ul>

        </div>

        </div>

    </body>
</html>

CodePudding user response：

Working code:

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

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto Slab:wght@600&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="description" content="">
  <link rel="stylesheet" href="mystyle.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<script>
  $(document).ready(function () {
    $("#social").click(function () {
      $("#social-media-wrapper").toggle(3000);
    });
  });
</script>

<body>
  </div>
  <div id="wrapper">
    <div id="background">
      <div id="menu">
        <ul>
          <li><a href="#">Αρχική</a></li>
          <li><a href="#">Γάμος</a></li>
          <li><a href="#">Βάπτιση</a></li>
          <li><a href="#">Καλλιτεχνική</a></li>
          <li><a href="#">Βίντεο Κλιπ</a></li>
          <li><a href="#" id="social">Επικοινωνία</a></li>
        </ul>
      </div>
      <div id="logo-wrapper">
        <div id="logo-area">
          <img src="logo.jpg" id="logo-image">
        </div>
      </div>
    </div>
  </div>
  <div id="content">
    <div id="SLIDE_BG"></div>
    <div id="social-media-wrapper">
      <ul id="social-media-container">
        <li><a href="https://www.instagram.com/efraimidis_photography/">
            <p ></p>
          </a>&nbsp;&nbsp;</li>
        <li><a
            href="https://www.facebook.com/Ευφραιμίδης-photography-2116065648685396">
            <p ></p>
          </a>&nbsp;&nbsp;</li>
        <li><a href="mailto:[email protected]">
            <p ></p>
          </a></li>
        <li id="phone-number">
          <span>Τηλέφωνο:&nbsp;<a href="tel:2321553290">2321553290</a></span>
          <span>Κινητό:&nbsp;<a href="tel:6996405521">6996405521</a></span>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #content {
    display: flex;
    flex-direction: row;
  }


  #SLIDE_BG {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    animation: slideBg 24s linear infinite 3s;
    animation-timing-function: ease-in-out;
    background-image: url('096.jpg');
  }

  @keyframes slideBg {
    0% {
      background-image: url('096.jpg');
    }

    12.5% {
      background-image: url('227.jpg');
    }

    25% {
      background-image: url('1436.jpg');
    }

    37.5% {
      background-image: url('2158.jpg');
    }

    50% {
      background-image: url('2250.jpg');
    }

    62.5% {
      background-image: url('096.jpg');
    }

    75% {
      background-image: url('227.jpg');
    }

    87.5% {
      background-image: url('1436.jpg');
    }
  }

  #background {
    background-color: black;
    height: auto;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    opacity: 0.8;
    display: flex;
    justify-content: flex-end;
  }

  #menu {
    position: relative;
    float: right;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }

  #menu li {
    float: left;
  }

  #menu ul {
    list-style-type: none;
  }

  #menu a {
    color: white;
    padding: 16px;
    text-align: center;
    min-width: 200px;
    border-style: none;
    text-decoration: none;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-size: larger;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }


  #menu a:hover {
    background-color: rgb(204, 198, 198);
  }

  #social-media-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }

  #social-media-container {
    font-size: 30px;
    text-align: center;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  #social-media-container p {
    text-decoration: none;
    color: rgb(255, 255, 255);
    margin-top: 15px;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  }

  #social-media-container p:hover {
    opacity: 0.7;
  }

  #phone-number {
    align-self: center;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    line-height: 30px;
    color: white;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
  }

  #phone-number span {
    margin-top: 40px;
  }

  #phone-number a {
    text-decoration: none;
    color: white;
    font-family: 'Roboto Slab', serif;
    font-size: 18px;
  }

  #logo-wrapper {
    width: 200px;
    height: 55px;
    overflow: hidden;
    z-index: 2;
    float: left;
  }

  #logo-image {
    width: 100%;
    height: auto;
    margin: -42px 0 0 -18px;
  }

Try to work more with flex boxes. Put your body in a flex box that has a vertical layout so theres the menu bar and then the actual content. Then in the content use a flex box that has a horizontal layout to let if flow from left to right.

Never use top to align an item to fit in a view (In this example 60 because your menu bar is 60px in height). Align your flex boxes so they are all nicely next to each other. Only use top, bottom, left, right if it's absolutely needed. These constraints are prone to mess up your layout.

Also it's not a good practice to give an element a height of 100% but then use top on it. It will always mess up the layout because it thinks the height is for example 1000px but you add a top of 30px to it so now it's 1030px and it will add a scrollbar.