The reason why some part of the dropdown was hidden is because of the position: absolute; property. As the dropdown is on the rightmost of the screen and the width of the dropdown is 160px, it’s flowing outside of the viewport. Consider putting right: 0 on .dropdown-content. In the below code, I have also removed some redundant float: left properties. Hope this your expected output.

.dropbtn {
  border: none;
  width: 60px;
  height: 60px;
  cursor: pointer;
  padding: 10px;
}

.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f1f1f1;
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="dropdown">
  <img id="imgExtSettings" class="dropbtn" src="https://findicons.com/files/icons/2146/realistik_reloaded/128/gear.png" />
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

make change in .dropdown-content

.dropdown-content {
    display: none;
    position: relative;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    float:left;
}

make position:relative so that it’s space will be included in html. this will make sure that it’s drop-down contents is visible.

I’m using following CSS to create an drop down menu at the right top side of page. But the dropdown menu’s right part is not in visible area. I tried with float:right; in each CSS block, but half of the menu is still off the screen.

 <style>
                            .dropbtn {
                            padding: 16px;
                            border: none;
                            }

                            .dropdown {
                            position: relative;
                            display: inline-block;
                            float:right;
                            }

                            .dropdown-content {
                            display: none;
                            position: absolute;
                            background-color: #f1f1f1;
                            min-width: 160px;
                            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                            z-index: 1;
                            float:left;
                            }

                            .dropdown-content a {
                            color: black;
                            padding: 12px 16px;
                            text-decoration: none;
                            display: block;
                            float:left;
                            }

                            .dropdown-content a:hover {background-color: #ddd;
                                float:left;
                            }

                            .dropdown:hover .dropdown-content {display: block;float:left;}

                            .dropdown:hover .dropbtn {}
                        </style>

                           <div class="dropdown">
                                <img id="imgExtSettings" class="dropbtn" style="width:60px;height:60px;cursor:pointer;padding:10px;" src="https://findicons.com/files/icons/2146/realistik_reloaded/128/gear.png"></img>
                                <div class="dropdown-content">
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>

Can anyone please find what I’m doing wrong here?