Меню CSS: перенос слов в подменю

У меня есть раскрывающееся меню CSS, но я не могу понять одну проблему. Все после первого уровня имеет странное поведение переноса слов, которое я не хочу. Вероятно, это имеет какое-то отношение к свойствам position и display но я просто не могу понять это.

Вот как это выглядит на данный момент:

Вот как я хочу, чтобы это выглядело:

Предоставление элемента фиксированного с исправлениями этой проблемы, но я не хочу этого делать.

Мой CSS-код для меню выглядит так:

.menuclass {
  background: grey;
  list-style: none;
  position: relative;
}

.menuclass li {
  float: left;
}

.menuclass li:hover > ul {
  display: block;
}

.menuclass ul {
  display: none;
  list-style: none;
  background: black;
  position: absolute;
  top: 100%;
}

.menuclass ul li {
  float: none;
  position: relative;
}

.menuclass ul ul {
  left: 100%;
  top: 0;
  position: absolute;
}

Что я могу сделать, чтобы исправить эту проблему?

Я нашел аналогичный вопрос, где было рекомендовано использовать white-space: nowrap; но почему-то это кажется мне немного напуганным.

скрипка