Выровнять по правому краю "левый треугольник" в элементе меню
Я создаю меню HTML/CSS/JS и хочу, чтобы стрелка вправо указывала, что этот элемент является подменю.
Моя проблема в том, что в треугольнике Firefox (знак "▶" ) отображается на следующей строке вместо текущей строки...
Хром показал оба случая штрафа.
В BTS есть ошибки, похожие на мою ситуацию:
Я пробую 2 стратегии, это моя структура HTML:
<div class="name1">Submenu 1<span class="sub">▶</span></div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<div class="name2">Submenu 2</div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
и этот мой CSS, который показал проблему:
a, .name1, .name2 {
display: block;
white-space: nowrap;
}
.name1 > .sub {
float: right;
}
.name2:after {
content: "▶";
float: right;
}
JS Fiddle для игровой площадки.
Я помню, я читал код, где margin-right: -16px
или аналогичный, используемый с фоновым изображением или чем-то еще, чтобы сделать такой проект, но я не могу точно запомнить, как именно.
Какое обходное решение возможно?
UPDATE Я делаю более полный пример, HTML:
<div class="container">
Top level menu
<div class="box">
<div class="name1">Very long submenu 1<span class="sub">▶</span></div>
<a href="#">Item 1 1 1</a>
<a href="#">Item 2</a>
<div class="name2">Very long submenu 2</div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
CSS
a { border: green 1px dotted; margin: 2px; }
a, .name1, .name2 {
display: block;
white-space: nowrap;
}
.name1 > .sub {
display: inline-block;
float: right;
}
.name2:after {
content: "▶";
float: right;
}
.container {
display: inline-block;
background: gold;
position: relative;
}
.box { display: none; }
.container:hover > .box {
display: block;
position: absolute;
top: 100%;
}
Ответы
Ответ 1
Наконец, я решает проблему:
<div class="container">
Top level menu (hover on me)
<div class="box">
<div class="submenu">
<div class="name">Long submenu 1</div>
<div class="box">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
<a href="#">Item 1 1 1</a>
<a href="#">Item 2</a>
<div class="submenu">
<div class="name">Very long submenu 2</div>
<div class="box">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
</div>
</div>
и
.container {
display: inline-block;
background: gold;
position: relative;
}
.box { display: none; }
.container:hover > .box {
display: block;
position: absolute;
top: 100%;
}
.container .submenu {
position: relative;
}
.container .submenu:hover > .box {
display: block;
position: absolute;
top: 0;
left: 100%;
}
a, .name {
white-space: nowrap;
display: block;
}
.name {
padding-right: 1.2em;
position: relative;
}
.name:after {
content: "▶";
position: absolute;
top: 0;
left: 100%;
margin-left: -1em;
}
Существенная часть состоит в том, чтобы сделать элемент с треугольником как block
и position: relative
и зарезервировать пространство для треугольника на padding-right: -1.2em
и поместить треугольник на position: absolute
после элемента и вернуться назад на margin-left: -1em
.
Ответ 2
избавление от "white-space: nowrap" помогает