下拉从父div div获得背景

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

我要的是，下拉只对UI元素不是整个父DIV的背景。

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

<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>

来源

2016-10-11 Saad

背景是**透明**除非另有定义。只需为'ul'的背景定义不同的颜色。 –

发布与该下拉菜单相关的完整css代码。所以这可以提供帮助。 – ilmk

您使用导航>里的两倍，以及对NAV> LI>微升。有了这个，你可以给所有颜色一致。

取下DIV的颜色，把紫色的主要项目

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

的一个给下拉项目您想要的颜色，并使用显示：块

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

来源

2016-10-11 11:14:52 bond708

下拉从父div div获得背景

回答

相关问题