Float и Position:reletive в одном блоке. Проблема переноса контента у дочернего элемента на другую строку?

Question

[Anthony]

Хочу сверстать кнопку для выпадающего меню. Когда родительскому элементу задал (float + pos:rel) не задавая конкретной ширины всем элементам в коде то появляется проблема с (pos:abs). У дочернего элемента выставляется ширина самого длинного слова при которой все слова переходят на следующую строку. Проблему решал задав ссылкам свойство (white-space: pre) но потом появлялись проблемы с выравнивание элемента (.menu__budget) так как он переходил на другую строку. Как решить данную задачу не задавая фиксированных размеров элементам?
Код HTML

<div class="header__button">				
    <div class='button'>
       Кнопка
     </div>
     <ul class="header__menu menu">
	<li class="menu__item">
		<a href="#" class='menu__link'>Про Проекты</a>
	</li>
        <li class="menu__item">
		<a href="#" class='menu__link'>Ваши предложения и пожелания</a>
                <span class='menu__budget'>99</span>
        </li>
	<li class="menu__item">
		<a href="#" class='menu__link'>Наши партнеры</a>
	</li>
	<li class="menu__item">
		<a href="#" class='menu__link'>Обновления в сервисе</a>
	</li>
	<li class="menu__item">
		<a href="#" class='menu__link'>Нашли неполадки в сайте?</a>
	</li>
	<li class="menu__item">
		<a href="#" class='menu__link'>Помощь проекту</a>
	</li>
	<li class="menu__item">
		<a href="#" class='menu__link'>Контакты</a>
	</li>
	<li class="menu__item">
		<a href="#" class='menu__link'>Выход</a>
	</li>
       </ul>
</div>

Код CSS

.header__button {
	float: left;
	background: green;
	position: relative;
}
.header__menu {
	position: absolute;
	top: 100%;
	left: 100%;
}
.menu {
  background: #aaa;
  padding: 2em 0;
  margin: 0;
  list-style: none;
}
.menu__item {
  padding: .5em 1em;
  background: yellow;
   
   
}
.menu__item:hover {
  background: green;      
}
.menu__link {
  /* white-space: pre; */    
}

Answer 1

[Spaceoddity]

.menu__item {
  white-space: nowrap;
}