0
这里是我的codepen： http://codepen.io/beckbeach/pen/jBJByz?editors=1100把父母的工作状态下，强调当孩子被评选
我有一个使用手写笔（CSS）的一个导航栏。当在导航栏中选择一个孩子时，我希望父母加下划线。例如：当您将鼠标悬停在About上并进入子菜单时，我想要将About加下划线。
我的笔：
heading-color = hsl(262, 17%, 24%);
text-color = #7d809f;
accent-color = hsla(349, 85%, 55%, 1);
link-color = #ec1019;
link-color2 = #790000;
* {
font-family: Helvetica;
}
.theme-a {
p {
color: text-color;
}
h1, h2, h3, h4, h5, h6 {
color: heading-color;
}
a {
color: link-color;
&:hover {
color: link-color2;
}
}
}
nav {
@extends .theme-a;
border-bottom: 1px solid rgba(0,0,0,.0785);
background: white;
height: 60px;
width: 100%;
display: flex;
color: link-color;
padding: 0 30px;
flex-direction: row;
justify-contnent: flex-start;
align-items: center;
@media screen and (max-width: 1200px) {
padding-left: calc(((100% - 1200px)/2) + 30px);
padding-right: calc(((100% - 1200px)/2) + 30px);
}
p {
margin: 0;
}
a {
text-decoration: none;
}
}
.caret {
position: relative;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 25%;
left: 8px;
border-top: 6px solid link-color;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
&:after {
content: '';
position: absolute;
top: 25%;
left: 9px;
border-top: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
}
// TODO: Cleanup.
.Navbar {
&_nav-link {
margin: 0 5rem 0 0;
}
&_right {
display: flex;
flex-direction: row;
margin: 0 auto;
* {
border-top: 18px solid rgba(0,0,0,0);
border-bottom: 18px solid rgba(0,0,0,0);
}
.Dropdown-parent {
border-top: 18px solid rgba(0,0,0,0);
border-bottom: 18px solid rgba(0,0,0,0);
height: 100%;
margin: 0 5rem 0 0;
.Dropdown-box {
display: none;
width: 100%;
position: absolute;
top: 55px;
left: 0;
z-index: 100;
background: #f2f2f2;
padding: 0 0 0 5rem;
}
&:hover {
* {
border-top: 12px solid rgba(0,0,0,0);
border-bottom: 12px solid rgba(0,0,0,0);
}
> .Dropdown-box {
display: flex;
flex-direction: row;
}
}
> .Dropdown-box:hover {
display: flex;
flex-direction: row;
}
}
}
}