Option menu alignment is not proper - css

Question

I have created a option button for my project. The code is given below.I am trying to make proper alignment of .dotlist is moving on right side. It should me on left portion of dot button.
What will be the solution for making perfect dot dropdown button thus the list appear properly.
$('.dottbtn').on('click', function(e) {
e.stopPropagation();
$('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
$('.dotmenu').removeClass('dotopened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.dotted {
display: inline-block;
vertical-align: top;
float: right;
}
.dottbtn {
cursor: pointer;
margin-top: 5px;
width: 40px;
height: 20px;
z-index: 80;
position: relative;
align-items: flex-end;
}
.dottbtn {
background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
background-size: 17px 17px;
height: 17px;
width: 17px;
}
.dotmenu {
width: 150px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
float: right;
background: #fff;
position: absolute;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 90;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.dotmenu.dotopened {
visibility: visible;
opacity: 1;
}
.dotmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dotmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dotmenu ul.dot-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.dotmenu ul.dot-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.dotmenu ul.dot-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
<ul class="dot-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
Please help me to overcome from it.

Answer 1

Add right: 15px to .dottbtn and right: 10px to .dotmenu :
$('.dottbtn').on('click', function(e) {
e.stopPropagation();
$('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
$('.dotmenu').removeClass('dotopened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.dotted {
display: inline-block;
vertical-align: top;
float: right;
}
.dottbtn {
cursor: pointer;
margin-top: 5px;
width: 40px;
height: 20px;
z-index: 80;
position: relative;
align-items: flex-end;
}
.dottbtn {
background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
background-size: 17px 17px;
height: 17px;
width: 17px;
right: 15px;
}
.dotmenu {
width: 150px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
float: right;
background: #fff;
position: absolute;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 90;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
right: 10px;
}
.dotmenu.dotopened {
visibility: visible;
opacity: 1;
}
.dotmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dotmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dotmenu ul.dot-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.dotmenu ul.dot-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.dotmenu ul.dot-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
<ul class="dot-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>

Answer 2

Adding right:0; to your .dotmenu will fix it.
$('.dottbtn').on('click', function(e) {
e.stopPropagation();
$('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
$('.dotmenu').removeClass('dotopened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.dotted {
display: inline-block;
vertical-align: top;
float: right;
}
.dottbtn {
cursor: pointer;
margin-top: 5px;
width: 40px;
height: 20px;
z-index: 80;
position: relative;
align-items: flex-end;
}
.dottbtn {
background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
background-size: 17px 17px;
height: 17px;
width: 17px;
}
.dotmenu {
width: 150px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
float: right;
background: #fff;
position: absolute;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 90;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
right: 0;
}
.dotmenu.dotopened {
visibility: visible;
opacity: 1;
}
.dotmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dotmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dotmenu ul.dot-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.dotmenu ul.dot-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.dotmenu ul.dot-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
<ul class="dot-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>