Dropdown menu width by content - html

Question

I have a dropdown menu, which I want change, that the dropdown menu width will be by content. I want to change, that dropdown <li> will be in only one row under main <li> next to each other.
I have it on jsfiddle here, where I have sass which I use. http://jsfiddle.net/hhkrp71f/3/
Here is my solution:
.header__links {
float: right;
margin-top: 40px;
}
.header__links nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.header__links nav ul li {
font-weight: 100;
font-style: italic;
color: red;
float: left;
margin-left: 25px;
}
.header__links nav ul li a {
color: red;
text-decoration: none;
}
.header__links nav ul li a:hover {
color: red;
transition: color 0.7s ease;
}
.header__links nav ul li:hover ul {
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
.header__links nav ul li ul {
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 500ms ease;
-moz-transition: 500ms ease;
-o-transition: 500ms ease;
transition: 500ms ease;
position: absolute;
margin: 0;
padding: 20px 0 0;
}
.header__links nav ul li ul li {
margin: 0;
padding: 10px;
background-color: blue;
}
<div class="header__links">
<nav>
<ul>
<li>Test
<ul>
<li>Test Test Test</li>
<li>Test Test</li>
<li>Test Test Test</li>
<li>Test Test</li>
</ul>
</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</div>

Answer 1

Add right: 0 to your inner ul.
.header__links {
float: right;
margin-top: 40px;
}
.header__links nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.header__links nav ul li {
font-weight: 100;
font-style: italic;
color: red;
float: left;
margin-left: 25px;
}
.header__links nav ul li a {
color: red;
text-decoration: none;
}
.header__links nav ul li a:hover {
color: red;
transition: color 0.7s ease;
}
.header__links nav ul li:hover ul {
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
.header__links nav ul li ul {
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 500ms ease;
-moz-transition: 500ms ease;
-o-transition: 500ms ease;
transition: 500ms ease;
position: absolute;
margin: 0;
padding: 20px 0 0;
right: 0;
}
.header__links nav ul li ul li {
margin: 0;
padding: 10px;
background-color: blue;
}
<div class="header__links">
<nav>
<ul>
<li>Test
<ul>
<li>Test Test Test</li>
<li>Test Test</li>
<li>Test Test Test</li>
<li>Test Test</li>
</ul>
</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</div>