Как изменить фон и / или границу поля подменю?

Question

снимок экрана

Я делаю веб-сайт на своем тестовом сайте: http://work.jivova.com, и теперь я застрял в поиске способа изменить цвет фона окна подменю(показано на скриншоте) для полупрозрачного просмотра, а также для возможности удаления границы поля с помощью пользовательского CSS.

Я пробовал несколько решений, но ни одно из них не сработало.

Есть предложения?

Большое спасибо.

Answer 1

У вас есть стиль в вашей основной таблице стилей, .main-navigation ul ul, который дает вашему подменю эту границу.Если вы хотите, чтобы только элементы класса sub-menu не имели границ, создайте новый стиль (который должен следовать после правила, приведенного выше в каскаде - похоже, вы используете WordPress, так что это должно быть в дочерней теме):

.main-navigation ul ul.sub-menu {
    border : 0px; 
}

Если вы хотите все экземпляры ul внутри ul внутри главной навигации, вы можете оставить часть .sub-menu.

КакЧто касается цвета фона, я не совсем понимаю, что вы хотите сделать - фон для всей рамки или изменить серый фон, который вы получаете в состоянии наведения?Если вы имеете в виду серый фон, который добавляется стилем .main-navigation li li:hover, .main-navigation li li.focus.Вы можете использовать документацию по непрозрачности , чтобы изменить прозрачность серого фона на что-то другое, а также добавить это новое правило в свою дочернюю тему.

Answer 2

В следующий раз лучше добавьте код вашего меню сюда, чтобы он также помог кому-то, если ваш сайт будет изменен.

Вот пользовательский CSS, который сделает меню прозрачным и убирает границу:

.main-navigation ul ul {
  background: rgba(255, 255, 255, 0.75); /* 0.75 - WHITE */
  border: 0;
}

Если вы хотите изменить цвет или эффект прозрачности также при наведении, вам нужно:

.main-navigation li li:hover, .main-navigation li li.focus {
   background: rgba(255, 0, 0, 0.75);  /* 0.75 - RED */
}

Если вы хотите сделать прозрачным все подменю, а не только фон, вы должны добавить:

.main-navigation ul ul {
  opacity: .75; /* This is also working for hover or active states */
}