Html CSS：覆盖父元素样式

当我在谷歌搜索的时候，我看到了一个HTML菜单，上面有一个很好的动画。我决定在我的一个项目中使用菜单

在正常情况下，菜单如下所示

原来的菜单没有子菜单。我已经添加了子菜单，以满足我的项目需要。 悬停时，菜单如下所示：-

最后，下拉菜单如下所示：

如您所见，在上一幅图像中，子菜单中出现了一些不必要的黄线。我认为这是因为子元素继承了其父元素的样式

我一直试图通过为子元素编写显式类来禁用/重写它，但没有成功。我有一个可行的CSS知识。我想写这样的CSS，它将删除不需要的黄线，如第三张图片中突出显示

.cl-effect-14a{
填充：0 20px；
高度：46px；
}
.cl-effect-14A：：之前，
.cl-effect-14A：：之后{
位置：绝对位置；
宽度：44px；
高度：2倍；
背景#F9DB55；
内容：''；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
指针事件：无；
}
.cl-effect-14A：：之前{
排名：0；
左：0；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换原点：0；
-moz变换原点：0；
变换原点：0；
}
.cl-effect-14A：：之后{
右：0；
底部：0；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换来源：100%0；
-moz变换原点：100%0；
变换原点：100%0；
}
.cl-effect-14A:悬停：：之前，
.cl-effect-14A:悬停：：之后，
.cl-effect-14A：焦点：：之前，
.cl-effect-14A：焦点：：之后{
不透明度：1；
}
.cl-effect-14A:悬停：：之前，
.cl-effect-14A：焦点：：之前{
左：50%；
-webkit变换：旋转（0度）translateX（-50%）；
-moz变换：旋转（0度）translateX（-50%）；
变换：旋转（0度）translateX（-50%）；
}
/*****我的代码******/
ul li ul.下拉列表{
最小宽度：100%；
/*设置下拉列表的宽度*/
背景#f2f2；
显示：无；
位置：绝对位置；
z指数：999；
左：0；
}
ul li：悬停ul.下拉列表{
显示：块；
/*显示下拉列表*/
}
ul li ul.下拉列表li{
显示：块；
}
.链接{
颜色：黑色；
背景：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
边框底部：1px纯黑；
转化：无；
}
.links：：之前{
转化：无；
}
.links：：之后{
转化：无；
}

因此，您需要解决的主要问题是下拉列表
a
元素上的黄线。这些都是因为导航栏效果的css的编写方式。例如：

.cl-effect-14 a::before

这意味着任何带有class
cl-effect-14
元素的
a
标记都将得到这些更改，因此这将在下拉列表中包括您的
a
标记，因为下拉列表中有一个父类

现在，这个解决方案并不理想，但是您可以使用css
：not（）
选择器指定您不希望这些效果应用于带有
链接的
标记。因此，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
选择器添加到第一部分，因为某种原因，这会干扰我正在玩的JSFIDLE上的布局。不过，您必须让我知道这是否适合您，因为我可能没有使用与您相同的引导版本。我也给它加了一个空白，这样看起来更像你分享的图片

我还将您的
.links
css更改为：

.dropdown .links {
  color: black;
  background: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid black;
}

由于某种原因，
文本装饰
属性没有被应用，所以我只是添加了特殊性

然后，我的最终代码如下所示（单击
full page
展开）：


.cl-effect-14a{
利润率：0.3倍；
填充：0 20px；
高度：46px；
}
.cl-effect-14A:不是（.links）：：之前，
.cl-effect-14A:不是（.links）：：之后{
位置：绝对位置；
宽度：44px；
高度：2倍；
背景#F9DB55；
内容：''；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
过渡：均为0.3秒；
指针事件：无；
}
.cl-effect-14A:不是（.links）：：之前{
排名：0；
左：0；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换原点：0；
-moz变换原点：0；
变换原点：0；
}
.cl-effect-14A:不是（.links）：：之后{
右：0；
底部：0；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
变换：旋转（90度）；
-webkit转换来源：100%0；
-moz变换原点：100%0；
变换原点：100%0；
}
.cl-effect-14a:不（.links）：悬停：：在，
.cl-effect-14A:非（.links）：悬停：：之后，
.cl-effect-14A:不是（.links）：焦点：：在之前，
.cl-effect-14A:不是（.links）：焦点：：之后{
不透明度：1；
}
.cl-effect-14a:不（.links）：悬停：：在，
.cl-effect-14A:不是（.links）：焦点：：之前{
左：50%；
-webkit变换：旋转（0度）translateX（-50%）；
-moz变换：旋转（0度）translateX（-50%）；
变换：旋转（0度）translateX（-50%）；
}
/*****我的代码******/
ul li ul.下拉列表{
最小宽度：100%；
/*设置下拉列表的宽度*/
背景#f2f2；
显示：无；
位置：绝对位置；
z指数：999；
左：0；
}
ul li：悬停ul.下拉列表{
显示：块；
/*显示下拉列表*/
}
ul li ul.下拉列表li{
显示：块；
}
.下拉列表.链接{
颜色：黑色；
背景：白色；
填充：12px 16px；
文字装饰：无；
显示：块；
边框底部：1px纯黑；
}