gpt4 book ai didi

css - 如何删除 bootstrap 3.0 中的下拉事件颜色?

转载 作者:太空宇宙 更新时间:2023-11-04 12:21:05 25 4
gpt4 key购买 nike

我正在开发 bootstrap 3.0。我有一个小问题,我想删除 nav dropdown 的事件背景色。见下图...

enter image description here

我已经尝试了很多但没有找到去除这种灰色的 Bootstrap css。任何人都可以告诉我如何删除它,因为我是 bootstrap 的新手。提前致谢。

已更新

请看下面的代码。

<nav class="navbar yamm navbar-default" role="navigation" style="height:0px;">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand glyphicon glyphicon-home" href="#" style="left: 40px;"></a>
</div>

<div id="navbar-collapse-2" class="collapse navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown yamm-fw" style="border-left: 1px dotted #ccc;margin-left: -40px;"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Electronics<b class="caret"></b></a>
<ul class="dropdown-menu" style="width:35%; left:125px; top:30px;">
<li>
<div class="yamm-content" style="width:200%;margin-top: 20px;">
<div class="row">
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="images/electronics/laptops.png"></a>
<p class="navbar-txt" style="margin-top: -150px;float: left;">Laptops & Computers</p>
<button class="btn btn-default navbar-btn">Explore</button>
</div>

<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="images/electronics/projectors.png"></a> <p class="navbar-txt" style="margin-top: -140px;float: left;">Tv & Projectors</p>
<button class="btn btn-default navbar-btn">Explore</button>
</div>

<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="images/electronics/tablets.png"></a>
<p class="navbar-txt" style="margin-top: -140px;float: left;">Mobiles & Tablets</p>
<button class="btn btn-default navbar-btn">Explore</button>
</div>

</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>

更新2#(CSS代码)

      @charset "utf-8";
/* CSS Document */

.navbar-brand {
float: left;
height: 83px;
width:125px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
margin-left:20px;
}


.glyphicon1 {
position: relative;
left: -5px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: 10px;
}


.dropdown-menu {
left: 250px;
}
.divider1{
height: 1px;
margin: 35px 0;
overflow: hidden;
background-color: #e5e5e5;

}

.dropdown-header1 {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
margin-top: -25px;

color: #428bca;
font-size: 18px;
font-weight: bold;
}
.divider2{
height: 1px;
margin: 62px 0;
overflow: hidden;
background-color: #e5e5e5;
}


.dropdown-header2 {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
margin-top: -52px;

color: #428bca;
font-size: 18px;
font-weight: bold;
}



.divider3{
height: 1px;
margin: 35px 0;
overflow: hidden;
background-color: #e5e5e5;
}

.dropdown-header3 {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
margin-top: -25px;


color: #428bca;
font-size: 18px;
font-weight: bold;

}


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.navbar-nav>li>.dropdown-menu {
margin-top:20px;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.navbar-default .navbar-nav>li>a {
width:200px;
font-weight:bold;

}

.mega-dropdown {
position: static !important;
width:100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 70%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 285px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight:bold;
}
.mega-dropdown-menu form {
margin:3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}


.custom-search-form{
margin-top:5px;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
color: #555;
background-color: blue; //color change
}

最佳答案

编辑:像这样的东西? http://jsfiddle.net/swm53ran/203/

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
color: #555;
background-color: blue; //color change
}

关于css - 如何删除 bootstrap 3.0 中的下拉事件颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28370679/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com