Тег "ul" в теге "li":
<li data-role="dropdown">
<a href="#">
Au sujet de
</a>
<ul>
<li>Mon CV</li>
<li>
<a href="/personality">
Ma personnalité
</a>
</li>
<li>Mes Hobbies</li>
<li>Mes formations</li>
<li>Mon mémoire</li>
</ul>
</li>
И свойства CSS для этого кода:
#mainMenu > li > ul {
display:none;
}
#mainMenu > li:hover > ul {
display:block;
text-decoration:none;
list-style-type:none;
padding-left: 0px;
padding-top:15px;
z-index: 1500;
background-color:#F2F2F7;
}
Когда я нахожу основной тег "li", весь текст перемещается.
Существует ли свойство css, чтобы предотвратить перемещение различных элементов вокруг меню, когда я его наводил? В противном случае существует ли другое решение?
спасибо
Если вы не хотите, чтобы один элемент влиял на положение других элементов вокруг него, используйте свойство position: absolute
.
Например:
#mainMenu > li:hover > ul {
position: absolute;
}
absolute
или relative
? пожалуйста, обновите свой ответ.
Вы должны установить абсолютную внутреннюю ul.
#mainMenu > li:hover > ul {
display:block;
text-decoration:none;
list-style-type:none;
padding: 15px 10px;
z-index: 1500;
background-color:#F2F2F7;
position: absolute;
}
Вот пример:
#mainMenu
. вероятно родительul
. Но даже я не воспроизвел проблему jsfiddle.net/d2sA4ul
». Таким образом, решения могут заключаться в использованииposition: absolute
. Смотрите ответ ниже.