CSS：覆盖父元素样式
有一次，当我在谷歌搜索时，我发现了一个带有漂亮动画的 HTML 菜单。我决定在我的一个项目中使用该菜单。
在正常情况下，菜单看起来像 
原始菜单没有子菜单。我添加了子菜单以满足我的项目需要。 悬停时，菜单如下所示：-
最后，下拉菜单如下所示：
如您所见，在最后一张图片中，子菜单中出现了一些不必要的黄线。我认为这是因为子元素继承了父元素的样式。
我一直试图通过为子元素编写显式类来禁用/覆盖它，但根本没有成功。我有一个可行的 CSS 知识。我想编写这样的 CSS，它会删除第三张图片中突出显示的不需要的黄线。
.cl-effect-14 a {
padding: 0 20px;
height: 46px;
}
.cl-effect-14 a::before,
.cl-effect-14 a::after {
position: absolute;
width: 44px;
height: 2px;
background: #F9DB55;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl-effect-14 a::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl-effect-14 a::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl-effect-14 a:hover::before,
.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::before,
.cl-effect-14 a:focus::after {
opacity: 1;
}
.cl-effect-14 a:hover::before,
.cl-effect-14 a:focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
/*****my code******/
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
.links {
color: black;
background: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
transform: none;
}
.links::before {
transform: none;
}
.links::after {
transform: none;
}<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav cl-effect-14">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="typo.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="blog.html">Blog</a></li>
<li>
<a href="#">Products ▾</a>
<ul class="dropdown">
<li><a href="#" class="links">Laptops</a></li>
<li><a href="#" class="links">Monitors</a></li>
<li><a href="#" class="links">Printers</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->有人可以帮我用 CSS 删除那些不需要的黄线。提前致谢。
资源：
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!--web-fonts-->
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Cabin:400,700,500,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Pacifico|Prata' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
1 个答案:
答案 0 :(得分：1)
因此，您要解决的主要问题是下拉 a 元素上的黄线。之所以会发生这些，是因为导航栏效果的 css 的编写方式。例如：
.cl-effect-14 a::before
这意味着带有类 a 的元素的任何 cl-effect-14 标记都将获得这些更改，因此这将在下拉列表中包含您的 a 标记，因为下拉列表有一个父级那个班。
现在，这个解决方案并不理想，但您可以使用 css :not() 选择器来指定您不希望这些效果应用到 a 标签中的 links班级。所以，css变成了这个：
.cl-effect-14 a {
margin: 0 3px;
padding: 0 20px;
height: 46px;
}
.cl-effect-14 a:not(.links)::before,
.cl-effect-14 a:not(.links)::after {
position: absolute;
width: 44px;
height: 2px;
background: #F9DB55;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl-effect-14 a:not(.links)::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl-effect-14 a:not(.links)::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):hover::after,
.cl-effect-14 a:not(.links):focus::before,
.cl-effect-14 a:not(.links):focus::after {
opacity: 1;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
请注意，由于某种原因，我没有将 :not 选择器添加到第一部分，因为这会干扰我正在使用的 JsFiddle 上的布局。不过，您必须让我知道这是否适合您，因为我可能没有使用与您相同的引导程序版本。我也给它加了一个边距，所以它看起来更像你分享的图片
我还将您的 .links css 更改为：
.dropdown .links {
color: black;
background: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
由于某种原因，没有应用 text-decoration 属性，所以我只是添加了特殊性。
我的最终代码如下所示（点击 full page 展开）：
.cl-effect-14 a {
margin: 0 3px;
padding: 0 20px;
height: 46px;
}
.cl-effect-14 a:not(.links)::before,
.cl-effect-14 a:not(.links)::after {
position: absolute;
width: 44px;
height: 2px;
background: #F9DB55;
content: '';
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl-effect-14 a:not(.links)::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl-effect-14 a:not(.links)::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):hover::after,
.cl-effect-14 a:not(.links):focus::before,
.cl-effect-14 a:not(.links):focus::after {
opacity: 1;
}
.cl-effect-14 a:not(.links):hover::before,
.cl-effect-14 a:not(.links):focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
/*****my code******/
ul li ul.dropdown {
min-width: 100%;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
.dropdown .links {
color: black;
background: white;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav cl-effect-14">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="typo.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="blog.html">Blog</a></li>
<li>
<a href="#">Products ▾</a>
<ul class="dropdown">
<li><a href="#" class="links">Laptops</a></li>
<li><a href="#" class="links">Monitors</a></li>
<li><a href="#" class="links">Printers</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->下拉菜单仍然偏离中心，但这是一个完全不同的问题，如果对你来说是一样的，你可以发布另一个关于它的问题。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？