У меня есть раскрывающееся меню CSS, но я не могу решить одну проблему. Все после первого уровня имеет странное поведение переноса слов, которое я не хочу. Вероятно, это имеет какое-то отношение к свойствам position
и display
, но я просто не могу понять это.Меню CSS: перенос слов в подменю
Вот как это выглядит на данный момент:
Это, как я хочу, чтобы это выглядело:
Давать элемент а закрепленную исправляет эту проблему, но я не» Я хочу сделать это.
Мой 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;
, но почему-то это кажется мне немного фанк.
вам, вероятно, нужно 'бело-пространство: nowrap'. Если вы настроите скрипку, я с удовольствием продемонстрирую – Pevara
@PeterVR. Я добавил ссылку на Fiddle на мой вопрос. – Sven