Css problem s drop down

Pozz,
Imam problem s drop down menu, nece da mi se poravna sa desnom stranom glavnog linka stalno ide u ljevo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Administration</title>
    
    <link href="css/template.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <div id="top">
        <div class="top-inner">
            <div class="logo">logo</div>

            <div class="top-menu">
                <ul>
                    <li><b>username</b>
                        <ul class="second">
                            <li><a href="" title="">My profile</a></li>
                            <li><a href="" title="">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clr"></div>
        </div>
    </div>





</body>
</html>

css

#top {
background-color: #3c8dbc;
}

.top-inner {
}

.logo {
background-color: #367fa8;
display: block;
padding: 1em;
width: 220px;
float: left;
font-size: 16px;
font-weight: bolder;
color: #f2f2f2;
}

.top-menu {
float: right;
color: #f2f2f2;
}

.top-menu ul { margin:0 30px 0 0; padding:0; list-style:none; }
.top-menu ul li { display:block; float:left; margin:0; padding:19px 25px; background-color:#3c8dbc; }
.top-menu ul li:hover {background-color:#367fa8;}
.top-menu li ul { display: none; margin:0; padding:19px 0 0 0; }
.top-menu ul li a  {
display:block;
text-decoration:none;
color:#fff;
margin:0;
white-space:nowrap;
text-align:center;
}
.top-menu ul li a:hover { background:none; }
.top-menu li:hover ul { display: block; position: absolute; }
.top-menu li:hover li { float: none; }
.top-menu li:hover a { background:none; }
.top-menu li:hover li a:hover { background:none; }

Mozda ovako:
.top-menu li:hover ul { display: block;position: absolute;right: 39px; }

e to je to, hvala puno :slight_smile: