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

使用媒体查询来定位您认为用于台式机的屏幕尺寸。

例如：

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

这将定位到“屏幕”类型的媒体，并且视口尺寸的宽度必须最小为“ 1028px”。您需要自己尝试使用最小宽度尺寸。

Answer 2

您的HTML似乎无效：第二个（内部）ul起始标记根本没有关闭。
如果要使菜单透明，则应将规则放在“ ul”标签上，而不是在“ li”标签上，如下所示：

ul.dropdown菜单{ 背景颜色：透明！重要； }

Answer 3

.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;
}

如何将菜单的背景颜色更改为透明？

3 个答案: