Как изменить цвет фона меню на прозрачный?

Question

У меня есть меню, и я хочу изменить цвет фона на прозрачный в режиме рабочего стола.

ul.dropdown-menu li  {
  background-color: transparent !important;
}

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="menu" class="menu"><li id="menu-item-1496" class="menu-item menu-item-type-post_type menu-item- object-page menu-item-home current-menu-item page_item page-item-19 current_page_item menu-item-has-   children menu-item-1496 dropdown active">
  <a title="Home" href="https://adsler.co.uk/">Home </a>
  <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown">
    <i class="fa fa-angle-down" aria-hidden="true"></i>
  </span>
    <ul role="menu" class=" dropdown-menu"
    <li id="menu-item-1502" class="fa fa-user menu-item menu-item-type- post_type menu-item-object-page menu-item-1502">
    <a title="Create 
    Adsler Account" href="https://adsler.co.uk/create-account/">Create Adsler Account</a>
    </li>

Не работает .....

Answer 1

1. Ваш HTML кажется недопустимым: второй (внутренний) начальный тег ul просто не закрыт.

2. Если вы хотите сделать меню прозрачным, вы должны включить правилотег "ul", а не тег "li", например:

   ul.dropdown-menu {background-color: прозрачный! важный;}

Answer 2

.main-navigation .menu > li ul { 
    padding: 10px; 
    right: 0 !important; 
    background-color: transparent;  
    border-color:
    transparent;box-shadow: none
}
.main-navigation .menu > li > ul > 
li { 
    display: flex; 
    align-items: center; 
    background- color:transparent;
}

Answer 3

Используйте медиазапрос для определения размера экрана, который вы считаете нужным для рабочего стола.

Например:

@media screen and (min-width: 1028px) {
  ul.dropdown-menu li  {
    background-color: transparent;
  }
}

Это будет предназначаться для носителей типа 'screen' и для размеров области просмотра с минимальной шириной '1028px'. Вам нужно будет самостоятельно поэкспериментировать с размером min-width.