Question

我面临的问题是下拉列表是从父div继承背景。

我想要的只是下拉列表只有ul元素的背景而不是整个父div。

＆＃13;

div.main-category {
  background: #9f76da;
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav> li {
  position: relative;
  display: inline-block;
  width: 32.5%;
}
.nav>li>ul.dropdown-menu {
  background-color: #9f76da !important;
  border-radius: 0px;
  border: 0px;
  box-shadow: 0px 0px 0px;
  position: relative;
}

＆＃13;

<div class="main-category">
  <ul class="nav nav-bar">

    <li class="dropdown ">
      <a href="#" class="dropdown-toggle" id="drop1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Men <span class="caret"></span> </a> 
      <ul class="dropdown-menu" aria-labelledby="drop1">
        <li><a href="#">Action</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Another action</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Something else here</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
      </ul>
    </li>
    <li class="dropdown ">
      <a href="#" class="dropdown-toggle" id="drop1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Women <span class="caret"></span> </a> 
      <ul class="dropdown-menu" aria-labelledby="drop1">
        <li><a href="#">Action</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Another action</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Something else here</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
      </ul>

    </li>
    <li class="dropdown ">
      <a href="#" class="dropdown-toggle" id="drop1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Kids <span class="caret"></span> </a> 
      <ul class="dropdown-menu" aria-labelledby="drop1">
        <li><a href="#">Action</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Another action</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Something else here</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
      </ul>
    </li>

  </ul>
</div>

＆＃13;

Answer 1

你使用nav＆gt;李两次导航＆gt; li> UL认证。通过这种方式，您可以为所有颜色提供相同的颜色。

从div中删除颜色并将紫色放在主要项目的a上

.nav li.dropdown > a {   
  background: #9f76da;    
  display:block; 
  width:100%;  
}

为下拉项目提供您想要的颜色并使用display：block

https://jsfiddle.net/bond708/v1ecmsfo/

下拉从父div css获取背景

1 个答案: