title: Dropdown menu cut off, right side
body: <p>I'm trying to make a dropdown menu on the right side of the screen for my users. But it keeps getting cut off and is hiding my text.</p>
  
  <p><a href="https://i.stack.imgur.com/LnEhg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LnEhg.png" alt="Before"></a></p>
  
  <p>When I hover over my dropdown, it gets completely cut off and hides my welcome text on the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/UWJSB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UWJSB.png" alt="After"></a></p>
  
  <p>My HTML Markup:</p>
  
  <pre><code>&lt;header&gt;
          &lt;div&gt;
  
               &lt;?php
                      if (isset($_SESSION['userId'])) {
                          require './includes/dbh.inc.php';
                          /*$sql = mysqli_query($conn,"SELECT fnidUser, lnidUsers FROM users"); */
                          $result = mysqli_query($conn, "SELECT fnidUser FROM users");
  
                          echo "
  
                      &lt;div class='dropdown' style='float:right;'&gt;
                          &lt;li class='login current2'&gt;&lt;a href='#'&gt;Welcome&lt;/a&gt;
                              &lt;div class='dropdown-content'&gt;
                                  &lt;ul&gt;
                                      &lt;li style='font-size:25px;'&gt;&lt;a href='#'&gt;My Account&lt;/a&gt;&lt;/la&gt;
                                      &lt;li style='font-size:25px;'&gt;&lt;a href='#'&gt;My Orders&lt;/a&gt;&lt;/la&gt;
                                      &lt;li style='font-size:25px;'&gt;&lt;a href='#'&gt;My Wishlist&lt;/a&gt;&lt;/la&gt;
                                      &lt;li style='font-size:25px;'&gt;&lt;a href='#'&gt;My Cart&lt;/a&gt;&lt;/la&gt;
                                      &lt;li style='font-size:25px;'&gt;&lt;a href='#'&gt;Log out&lt;/a&gt;&lt;/la&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/div&gt;
  
                          ";
                  }
                      else{
                          echo "&lt;li class='login current2'&gt;&lt;a href='login.php'&gt;Login / Sign up&lt;/a&gt;&lt;/li&gt;";
                      }
              ?&gt;
  
          &lt;/div&gt;
          &lt;div class="container"&gt;
              &lt;div id="branding"&gt;
                  &lt;h1&gt;&lt;a href="index.php" title="Home"&gt;&lt;img src="./Header Image/header.png"&gt;&lt;/a&gt;&lt;/h1&gt;
              &lt;/div&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="apple.php"&gt;Apple&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="samsung.php"&gt;Samsung&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gadgets.php"&gt;Gadgets&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>My CSS Style for this page(side note, I attempted to make the text size smaller and for some reason it doesn't seem to work):</p>
  
  <pre><code>/* Global */
  .container{
      width: 80%;
      margin: auto;
      overflow: hidden;
  }
  
  ul{
      margin: 0;
      padding: 0;
  }
  
  .button_1 {
      height: 49px;
      width: 144px;
      background: #FF3B3F;
      border: 0;
      padding-left: 20px;
      padding-right: 20px;
      color: white;
      font-size: 25px;
      border-radius: 8px;
      cursor: pointer;
  }
  
  .button_1:hover{
      background-color: #752021;
      color: #CCCCCC;
  }
  
  .button_1, .roundbutton:focus{
      outline: 0;
  }
  
  img{
      user-drag: none; 
      user-select: none;
      -moz-user-select: none;
      -webkit-user-drag: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  body{
      font: 15px/1.5 Arial;
      padding: 0;
      margin: 0;
      background-color: #EFEFEF;
  }
  
  .footerc{
      float: left;
  }
  
  .footerb{
      float: right;
  }
  
  .noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  
  /* Login Page Stuff */
  #login_page{
      margin-top: 65px;
      margin-right: 150px;
      margin-bottom: 65px;
      margin-left: 150px;
      min-height: 500px;
  }
  
  #login_page h1{
      text-align: center;
      color: #FF3B3F;
      font-size: 50px;
      text-shadow: 2px 2px 12px #000000;
  }
  
  /* Header */
  header{
      background: #35424A;
      color: #FFFFFF;
      padding-top: 30px;
      min-height: 70px;
      border-bottom: #FF3B3F 5px solid;
  }
  
  header ul a{
      color: #FFFFFF;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 24px;
  }
  
  header li{
      float: left;
      display: inline;
      padding: 0px 20px 0px 20px;
  }
  
  header #branding{
      float: left;
  }
  
  header #branding h1{
      margin: 0;
  }
  
  header nav{
      float: right;
      margin-top: 25px;
      margin-right: 100px;
  }
  
  header .highlight, header .current a{
      color: #FF3B3F;
      font-weight: bold;
  }
  
  header .current2 a{
      color: #FF3B3F;
  }
  
  header a:hover{
      color: #CCCCCC;
  }
  
  .login a{
      color: #FFFFFF;
      text-decoration: none;
      float: right;
  }
  
  .login {
      color: #FFFFFF;
      text-decoration: none;
      float: right;
      margin-top: -10px;
      margin-right: 10px;
  }
  
  /* Login Form Style */
  
  section #login_page td .form{
      margin-bottom: 25px;
  }
  
  
  
  /*Showcase*/
  #showcase{
      min-height: 500px;
      background:url('../img/iphone_showcase.png') no-repeat -50px -50px;
      border-bottom: #FF3B3F 5px solid;
      /*Scroll Parallax*/
      background-attachment: fixed;
  }
  
  #showcase h1{
      text-align: center;
      color: #FF3B3F;
      margin-top: 200px;
      font-size: 50px;
      text-shadow: 4px 4px 12px #000000;
  }
  
  
  /* Boxes */
  #boxes{
      margin-top: 65px;
  }
  
  #boxes .box{
      float: left;
      width: 30%;
      padding: 25px;
  }
  
  #boxes .button_1{
      align-content: center;
  }
  
  #boxes .box2{
      float: left;
      width: 48%;
      min-height: 100px;
  }
  
  
  /* Footer */
  footer{
      padding: 20px;
      margin-top: 200px;
      border-top: #FF3B3F 5px solid;
      background-color: #35424A;
      color: white;
      font-weight: bold;
  }
  
  footer .fpara, footer .logo{
      margin-left: 100px;
  }
  
  footer nav{
      float: right;
  }
  
  footer li{
      float: left;
      display: inline;
      padding: 0px 20px 0px 20px;
  }
  
  .fbhover{
      background: url('../footer image/facebook_hover_no.png') no-repeat;
      border-radius: 50%;
      height: 35px;
      width: 35px;
      margin-top: 42px;
      padding: 8px;
      cursor: pointer;
      background-size: 100%;
      transition: 0.5s;
      box-sizing: border-box;
  }
  
  .fbhover:hover{
      background: url('../footer image/facebook_hover_yes.png') no-repeat;
      background-size: 100%;
  }
  
  .instahover{
      background: url('../footer image/insta_hover_no.png') no-repeat;
      border-radius: 50%;
      height: 35px;
      width: 35px;
      margin-top: 42px;
      padding: 8px;
      cursor: pointer;
      background-size: 100%;
      transition: 0.5s;
      box-sizing: border-box;
  }
  
  .instahover:hover{
      background: url('../footer image/insta_hover_yes.png') no-repeat;
      background-size: 100%;
  }
  
  .trhover{
      background: url('../footer image/twitter_hover_no.png') no-repeat;
      border-radius: 50%;
      height: 35px;
      width: 35px;
      margin-top: 42px;
      padding: 8px;
      cursor: pointer;
      background-size: 100%;
      transition: 0.5s;
      box-sizing: border-box;
  }
  
  .trhover:hover{
      background: url('../footer image/twitter_hover_yes.png') no-repeat;
      background-size: 100%;
  }
  
  .sphover{
      background: url('../footer image/support_hover_no.png') no-repeat;
      border-radius: 50%;
      height: 35px;
      width: 35px;
      margin-top: 42px;
      padding: 8px;
      cursor: pointer;
      background-size: 100%;
      transition: 0.5s;
      box-sizing: border-box;
  
  }
  
  .sphover:hover{
      background: url('../footer image/support_hover_yes.png') no-repeat;
      background-size: 100%;
  }
  
  
  /* Apple Store */
  section #applestore{
      margin-top: 65px;
  }
  
  
  
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  
  
  
  
  
  /* Store Sections */
  #main {
      padding:20px 0;
  }
  #content {
      overflow: hidden;
  }
  #content #left, #content #right {
      float: left;
      margin: 0 2%;
      width: 63%;
  }
  #content #right {
      margin-left: 0;
      width: 30%;
  }
  #content h3 {
      background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */
      background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #F6F6F6)); /* Safari 4+, Chrome 2+ */
      background: -webkit-linear-gradient(#ffffff, #F6F6F6); /* Safari 5.1+, Chrome 10+ */
      background: -o-linear-gradient(#ffffff, #F6F6F6); /* Opera 11.10 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6'); /* IE6 &amp; IE7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */
      background: linear-gradient(#ffffff, #F6F6F6); /* the standard */
      border-bottom: 1px solid #E0E0E0;
      color: #3C3C3C;
      font-size: 12px;
      font-weight: bold;
      line-height: 15px;
      padding: 11px 0 12px 20px;
      text-transform: uppercase;
  }
  #content ul {
      list-style:none outside none;
      margin:0;
      padding:0;
  }
  #content #left ul li {
      float:left;
      padding-bottom: 21px;
      width: 33%;
  }
  #content #left ul li:hover {
      background-color: #fbfbfb;
  }
  #content #right ul li {
      border-top: 1px solid #E7E7E7;
      overflow: hidden;
  }
  #content #right ul li:hover {
      background-color: #fbfbfb;
  }
  #content #right ul li:first-child {
      border-width: none;
  }
  #content #left ul li .img {
      text-align: center;
  }
  #content #right ul li .img {
      background-color: #FFFFFF;
      float: left;
      height: 94px;
      text-align: center;
      width: 113px;
  }
  #content #left ul li .img img {
      height:128px;
      width:128px;
  }
  #content #right ul li .img img {
      height:70px;
      margin-top: 11px;
      width:70px;
  }
  #content #left ul li .info {
      padding: 17px 20px 0 19px;
  }
  #content #right ul li .info {
      float: left;
      overflow: hidden;
      padding: 17px 0 0 21px;
      width: 164px;
  }
  #content ul li .info .title {
      color: #4B4B4B;
      display: inline-block;
      font-size: 11px;
      font-weight: bold;
      line-height: 16px;
      text-decoration: none;
      text-transform: uppercase;
      width: 150px;
  }
  #content ul li .info .title:hover {
      color: #049733;
  }
  #content #left ul li .info p {
      color: #7F7F7F;
      font-size: 11px;
      line-height: 16px;
      padding-top: 3px;
  }
  #content #left ul li .info .price {
      background: none repeat scroll 0 0 #F7F7F7;
      color: #383838;
      font-size: 12px;
      font-weight: bold;
      line-height: 16px;
      margin: 17px 0 10px;
      padding: 6px 0 6px 8px;
  }
  #content #right ul li .info .price {
      color: #383838;
      font-size: 12px;
      font-weight: bold;
      line-height: 16px;
      padding-top: 25px;
  }
  #content #left ul li .info .price .st {
      color: #7F7F7F;
      font-size: 11px;
      line-height: 16px;
      margin-right: 3px;
  }
  #content #right ul li .info .price .usual, #content #right ul li .info .price .special {
      color: #7F7F7F;
      font-size: 12px;
      font-weight: normal;
      line-height: 16px;
      padding-right: 6px;
      text-decoration: line-through;
  }
  #content #right ul li .info .price .special {
      color: #FD7A01;
      font-weight: bold;
      text-decoration: none;
  }
  #content #left ul li .info .actions {
      overflow:hidden;
  }
  #content #left ul li .info .actions a {
      border: 1px solid #E0E0E0;
      color: #fd7a01;
      display: block;
      float:right;
      font-size: 11px;
      font-weight: bold;
      line-height: 16px;
      padding: 5px;
      text-decoration: none;
  }
  #content #left ul li .info .actions a:first-child {
      color: #009832;
      float:left;
  }
  </code></pre>
  
  <p>If you can provide me a solution it'd be much appreciated.</p>