css position absolute menu top [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying add notification icon, but is overflow text and dont on left.
Here is my code (run the snippet to see the result):
.dropdown {
display: inline-block;
cursor: pointer;
border: 1px solid #fff;
}
.dropdown:hover {
color: #e1a900;
}
.dropdown-content {
background-color: #333333;
display: none;
position: relative;
min-width: 180px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 64px;
}
.dropdown-content a {
color: #fff;
font-weight: bold;
padding: 12px 12px;
text-decoration: none;
display: block;
-o-transition:color .2s ease-out, background .3s ease-in;
-ms-transition:color .2s ease-out, background .3s ease-in;
-moz-transition:color .2s ease-out, background .3s ease-in;
-webkit-transition:color .2s ease-out, background .3s ease-in;
transition:color .2s ease-out, background .3s ease-in;
}
.dropdown-content a:hover {background-color: #cc9900;}
.dropdown:hover .dropdown-content {display: block;}
.bellimg {
padding-top: 5px;
}
.bellnumbers {
font-size:12px;
background-color:red;
width:16px;
line-height: 16px;
text-align: center;
color:#fff;
z-index: 2;
border-radius: 3px;
position: absolute;
left: 30px;
}
.bell {
border: 1px solid #fff;
width: 48px;
height: 42px;
left: 30;
position: absolute;
}
.notificationicon {
position: absolute;
top: 0px;
right: 0px;
border: 1px solid #fff;
}
/********************************
* Menu Styles *
*********************************/
#menu {
height: 64px;
width: 450px;
}
#menu ul,#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu li a {
color: #fff;
font-weight: bold;
-o-transition: color .2s ease-out, background .3s ease-in;
-ms-transition: color .2s ease-out, background .3s ease-in;
-moz-transition: color .2s ease-out, background .3s ease-in;
-webkit-transition: color .2s ease-out, background .3s ease-in;
transition: color .2s ease-out, background .3s ease-in;
}
#menu a {
display: block;
line-height: 35px;
padding: 14px 10px 14px 5px;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #000;
}
#menu li:hover > a,#menu li a:hover {
color: #fff;
background-color: #e1a900;
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer;
}
#menu label {
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center;
}
#menu label span {
font-size: 13px;
position: absolute;
left: 35px;
}
#menu ul.menus {
/*background sub menus*/
height: auto;
overflow: hidden;
width: 180px;
background-color: #333333;
position: absolute;
z-index: 99;
display: none;
border: 1px solid #000;
border-top: none;
color: #fff;
}
#menu ul.menus a {
color: #fff;
padding: 0px;
}
#menu ul.menus li {
display: block;
width: 100%;
text-transform: none;
}
#menu li:hover ul.menus {
display: block;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
#menu a.prett {
padding: 14px 19px 14px 5px;
}
#menu li:hover > a.prett,#menu a.prett:hover {
/*DropDown list background color*/
background: #e1a900;
color: #fff;
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 30px;
right: 4px;
}
#menu ul.menus a:hover {
/*Dropdown menu background color*/
background: #e1a900;
}
#media screen and (max-width: 1000px){
#menu {width: 150px;}
#menu a {padding: 0px; border-bottom: 1px solid #000;}
#menu a.prett {padding: 0px;}
#menu a.prett::after {top: 15px;right: 4px;}
#menu{position:relative;margin-top:0;}
#menu ul{background-color: #333333;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none; border-top: 2px solid red; border-bottom: 2px solid red;}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#e1a900;color:#fff;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background-color: #4d4d4d;}
#menu ul.menus a:hover{background:#e1a900;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block;margin-top: 15px;}
#menu input{z-index:4}
#menu input:checked + label{color:#e1a900; background-color: #404040;}
#menu input:checked ~ ul{display:block;}
}
.menu_head {
width: 100%;
height: 64px;
background-color: #000;
background-image: url("../images/menu.png");
box-shadow: 0 3px 6px rgba(0,0,0, .8);
background-position: top;
text-align: center;
padding-left: 10px;
padding-right: 10px;
position: fixed;
top: 0;
color: #fff;
z-index:1;
font-weight: bold;
border: 1px solid #fff;
}
<div class='menu_head'>
<!-- MENU LEFT -->
<nav id='menu' style='border: 1px solid #fff;'>
<input type='checkbox'/>
<label>≡<span>MENU</span></label>
<ul>
<li><a href=''>Home</a></li>
<li><a class='prett' href='' onclick='return false;'>Rules</a>
<ul class='menus'>
<li><a href='#'>Rules </a></li>
</ul>
</li>
<li><a class='prett' href='' onclick='return false;'>Suporte</a>
<ul class='menus'>
<li><a href='#'>Terms of Service</a></li>
</ul>
</li>
</ul>
</nav>
<div class='notificationicon'>
<span class='bell'>
<img class='bellimg' src='../images/notification.png'/>
<span class='bellnumbers'>10</span>
</span>
<span class='dropdown'>
<div style='float: right; line-height: 64px; margin-right:15px;'>Welcome asd asd asd asd x3G</div>
<div class='dropdown-content'>
<a href=''>PROFILE</a>
<a href=''>TEAM</a>
<a href=''> SETINGS</a>
<a href=''>BALANCE</a>
<a href=''> INBOX</a>
<a href=''> LOG OUT</a>
</div>
</span>
<div style='clear:both;'></div>
</div>
<div style='clear:both;'></div>
</div>

Answer 1

On the .bell class you have defined the left property value without a unit, for example px (See image below for reference)
Simply add a unit like px or % and it should work:
.bell {
left: 30px;
}