Как сделать вложенный список НЕ наследующим стиль его родителейCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как сделать вложенный список НЕ наследующим стиль его родителей

Сообщение Anonymous »

На моей странице есть несколько вложенных списков, и у меня возникла проблема с их оформлением так, как я хочу. При наведении курсора на каждый элемент списка я хочу, чтобы фон элемента был цветным, а текст менялся с черного на белый или с синего на белый в зависимости от того, является ли это ссылкой или нет. Я могу заставить это работать нормально, но я НЕ хочу, чтобы родительский элемент подменю выделял ВСЕ ссылки внутри него, когда родительский элемент наведен на него. Например, предположим, что у меня есть элемент списка под названием «дом», который открывает подсписок внутри него. Я бы хотел, чтобы «домой» менял текст и цвет фона при наведении курсора, но происходит то, что каждая отдельная ссылка в подменю изменяется при наведении курсора на «домой». Я знаю, почему это происходит, но я хочу знать, как это остановить. Я попробовал закрыть тег начальных списков, но это неправильный способ, и в любом случае это портит стиль списков. Могу ли я вообще добиться того, чего хочу? Я заметил, что это происходит только в том случае, если начало вложенной ссылки является ссылкой. Ниже приведен фрагмент списков, с которыми я пытаюсь работать. (Я изменил наведение ссылки на серый, чтобы вы могли видеть, о чем я говорю.)

Код: Выделить всё

.filesubmenu {
display: block;
position: absolute;
width: 164px;
top: 0;
left: 0;
background-color: #bdbebd;
border-top: 1px #dedfde solid;
border-right: 1px #000 solid;
border-bottom: 1px #000 solid;
border-left: 1px #dedfde solid;
outline: 1px #fff outset;
outline-offset: -2px;
}

.filestab ul li {
display: block;
padding-right: 16px;
padding-left: 5px;
width: calc(100% - 1px);
height: 20px;
text-align: left;
font-family: "Arial";
font-size: 12px;
}

.filestab ul li:hover {
background-color: #00007b;
color: #fff;
}

.filestab ul li a {
color: #0000ff;
}

.filestab ul li:hover a {
color: #fff;
}
.filepop1,
.filepop2 {
display: block;
position: absolute;
outline: white 1px outset;
outline-offset: -2px;
border-right: 1px #000 solid;
border-top: 1px #dedfde solid;
border-left: 1px #dedfde solid;
border-bottom: 1px #000 solid;
background-color: #bdbebd;
width: 164px;
left: calc(100% - 3px);
top: -1px;
}

Код: Выделить всё

[list]
[*]I'm an example submenu!
[*]Example
[*][url=#]Example with link[/url]
[*]Example

[url=#]Example with link[/url]
[*]Example
[*]Example
[/list]

[*]Example


[*]Example
[*]Example
[*]Example
[*]Example




Я испробовал почти все возможные способы стилизации списков и ссылок. подумал, и НИЧЕГО не получилось :(

Подробнее здесь: https://stackoverflow.com/questions/790 ... ts-styling
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»