Question

我正在尝试制作一个类似于https://makr.com/

的Bootstrap菜单

我没事，但我还没弄明白如何让它完全透明。

正如你在下面的小提琴中看到的那样，当我悬停时，下拉列表总会有一些灰色阴影。

我真的不知道我还能做什么......昨天和今天早上我一直在谷歌搜索和寻找解决方案，现在我真的被困住了。

任何人都可以看一下这个小提琴并告诉我，非常感谢

菜单中唯一的颜色是

.navbar-default { 
  background-color: transparent; border-color: transparent;
  } 
.navbar-default :hover { 
   background-color: rgba(248, 248, 248, .7); border-color: rgba(231, 231, 231, .7)
{

悬停

https://jsfiddle.net/dadihall/5zzcq2t5/22/

提前谢谢大地

Answer 1

试试这个：

<div id="messageBubbleArea">
  <div class="fromMe msgBubble">Hey babe<br>
    <span class="msgDate">2011-01-26 00:09:30</span>
  </div>
  <div class="clearfix"></div>
  <div class="fromMe msgBubble">
    <img style=" max-width:200px;" src="http://images.clipartpanda.com/rainbow-clip-art-rainbow.gif"><br>
    <span class="msgDate">2011-01-26 01:52:16</span>
    </div>
    <div class="clearfix"></div>
</div>

请参阅fiddle.

Answer 2

您好，请尝试以下css

    .dropdown.full-width {
width : 120px;
background-image: transparent;
background-color: transparent;
}

.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal; 
 background-image: transparent;
background-color: rgba(255,255,255,0.5); //or any level of transparency
} 

    .full-width.dropdown > .dropdown-menu > li > a:hover {
background-color: rgba(255,255,255,0.5); //or any level of transparency
}

透明引导下拉菜单

2 个答案: