смените абсолютное положение слева направо на теге span в зависимости от класса
Вы проверили RSE (, R проявляет эмоции System Explorer)? Я думаю, что это достаточно близко к тому, чего Вы хотите достигнуть.
3 ответа
Даже если вы установили right: 0 , ваш left: 0 все еще наследуется. Вам нужно установить left: auto , чтобы переопределить этот стиль для класса поддержки .
Судя по тому CSS, вы, кажется, не понимаете его правильно или, по крайней мере, неправильно его используете. Вы можете прочитать статью SitePoint о каскаде, специфичности и наследовании для хорошего введения.
Причина, по которой это не работает, состоит в том, что последние две строки этого CSS применяется к элементам списка с помощью класса поддержки . Предпоследняя строка применяется ко всем всем элементам списка , а последняя строка затем добавляется к этой строке для элементов списка поддержки . Итак, поскольку в этой последней строке нет свойства left , свойство left каскадно спускается вниз от предыдущей строки, делая его left: 0 также .
Когда вы используете класс для обозначения особого случая, вы не должны:
Хм, странно. Я не могу сказать вам, почему ваш код не работает, он должен работать, поскольку поддержка: hover span является более конкретным селектором.
Однако нашел исправление: Остались абсолютные позиции элементов: 0; по умолчанию. Если удалить left: 0; из селектора диапазона он будет работать.
Ваш код будет выглядеть так:
#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}