#html #css
#HTML #css
Вопрос:
Я все еще пытаюсь освоить основы css, и я столкнулся со странной проблемой, никогда раньше не использовал SO, поэтому извините, если здесь что-то сделано неправильно
Я пытаюсь создать базовое интерактивное меню pure css3, которое отображает выпадающие неупорядоченные списки при наведении курсора мыши на родительские элементы. Он имеет 3 «уровня глубины», «нулевой» уровень (который включает в себя элемент, который вы можете видеть на самом видном месте), «первый уровень глубины» (который включает в себя первое выпадающее меню с названиями языков) и «второй уровень глубины» (который включает в себя список элементов, которые появляются при наведении курсора мыши на слово javascript в выпадающем меню «первый уровень глубины»)
Проблема в том, что первое выпадающее меню («первая глубина») выглядит немного смещенным по горизонтали относительно элемента «нулевая глубина», который показывает слово «Фреймворки и языки» (это отображается, если вы запускаете первый фрагмент кода), однако, чтобы попытаться исправить это, я добавил свойство «margin-left:-0.05rem;» в первый блок css раздела с надписью «проблемный сегмент» в коде css, но когда я делаю это, по некоторым причинам причина, по которой верхние и левые поля, указанные во втором блоке «проблемного сегмента» указанного css, полностью игнорируются, в результате чего 2-е выпадающее меню отображается в позиции, в которой я этого не хочу (это показано, если вы запустите второй фрагмент кода)
Есть идеи относительно того, что вызывает игнорирование полей, указанных во втором блоке? Я пробовал это в разных браузерах, и это работает одинаково, даже во фрагменте кода SO, я не знаю, чего мне здесь не хватает, afaik, поля не наследуются, но даже если бы они были, второй блок проблемного сегмента должен перезаписать все, что указано в первом блоке
Также приветствуется любая несвязанная критика кода или предложения..
ПЕРВЫЙ ФРАГМЕНТ КОДА
nav{
text-align:center;
background-color:#449944;
}
ul{
padding:0%;
list-style-type:none;
display:inline-block;
vertical-align:top;
width:15rem;
}
li{
background-color:#BBBBBB;
border:0.5px solid #AAAAAA;
width:15rem;
height:1.5rem;
line-height:1.5rem;
}
ul ul{
display:none;
}
/*Problem segment*/
li:hover>ul{
display:block;
position: absolute;
margin-left:-0.05rem;
}
ul.second_depth{
margin-top:-1.55rem;
margin-left:15rem;
background-color:white;
} <body>
<nav>
<ul class="zeroth_depth">
<li>Frameworks and Languages
<br>
<ul class="first_depth">
<li>Ruby</li>
<li>Javascript
<br>
<ul class="second_depth">
<li>vue</li>
<li>react</li>
<li>angular</li>
</ul>
</li>
<li>Python</li>
</ul>
</li>
</ul>
</nav>
</body> ВТОРОЙ ФРАГМЕНТ КОДА
nav{
text-align:center;
background-color:#449944;
}
ul{
padding:0%;
list-style-type:none;
display:inline-block;
vertical-align:top;
width:15rem;
}
li{
background-color:#BBBBBB;
border:0.5px solid #AAAAAA;
width:15rem;
height:1.5rem;
line-height:1.5rem;
}
ul ul{
display:none;
}
/*Problem segment*/
li:hover>ul{
display:block;
position: absolute;
margin-left:-0.05rem;
}
ul.second_depth{
margin-top:-1.55rem;
margin-left:15rem;
background-color:white;
} <body>
<nav>
<ul class="zeroth_depth">
<li>Frameworks and Languages
<br>
<ul class="first_depth">
<li>Ruby</li>
<li>Javascript
<br>
<ul class="second_depth">
<li>vue</li>
<li>react</li>
<li>angular</li>
</ul>
</li>
<li>Python</li>
</ul>
</li>
</ul>
</nav>
</body> Ответ №1:
Поля игнорируются, потому что у вас есть position: absolute . Как только вы это сделаете, элемент будет удален из потока, а поля (смещение от контейнера) станут несколько бессмысленными.
Для позиционирования меню используйте left и top вместо margin-left и margin-top .
nav{
text-align:center;
background-color:#449944;
}
ul{
padding:0%;
list-style-type:none;
display:inline-block;
vertical-align:top;
width:15rem;
}
li{
background-color:#BBBBBB;
border:0.5px solid #AAAAAA;
width:15rem;
height:1.5rem;
line-height:1.5rem;
}
ul ul{
display:none;
}
/*Problem segment*/
li:hover>ul{
display:block;
position: absolute;
margin-left:-0.05rem;
}
ul.second_depth{
top:1.55rem;
left:15rem;
background-color:white; /* since the `li` elements have backgrounds, you'll never see this */
} <body>
<nav>
<ul class="zeroth_depth">
<li>Frameworks and Languages
<br>
<ul class="first_depth">
<li>Ruby</li>
<li>Javascript
<br>
<ul class="second_depth">
<li>vue</li>
<li>react</li>
<li>angular</li>
</ul>
</li>
<li>Python</li>
</ul>
</li>
</ul>
</nav>
</body> Обратите внимание, что я инвертировал значение top , поскольку предполагал, что вы хотите, чтобы меню отображалось справа от пункта меню, дочерним элементом которого оно является.
Обратите также внимание, что это background-color:white не будет видно, поскольку дочерние li элементы уже имеют другое background-color значение.
Комментарии:
1. О, хм, понятно, я думал, что они могут работать, поскольку они казались прекрасными, пока я не добавил другое поле, спасибо, что указали на это. Вы оставили «margin-left» в первом блоке «проблемного сегмента», это было намеренно? что касается «цвета фона», упс ха-ха, я намеревался удалить это, но забыл, спасибо, что также указали на это