我已经阅读了很多示例和片段,但我无法弄清楚如何解决这个问题。 我有一个带有子列表的列表元素。然后我有一个所有这些元素的边框顶部。我正在设法删除第一个边框顶部,但它不起作用,甚至没有类。
这是代码。
<ul>
<li><a href="#">ABOUT OWSD</a></li>
<li><a href="#">WHY OWSD</a>
<ul>
<li><a href="#">Objectives</a></li>
<li><a href="#">Women and Gender</a></li>
<li><a href="#">Success stories</a></li>
<li><a href="#">Gender insite</a></li>
<li><a href="#">Partners</a></li>
</ul>
</li>
<li><a href="#">NETWORK</a></li>
<li><a href="#">CAREER DEVELOPMENT</a></li>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">RESOURCES</a></li>
</ul>
</nav>
nav a {
display: block;
text-decoration: none;
}
ul li a{
position: relative;
left: 0px;
color: #1d5237;
background-color: #1a1a1a;
font-weight: 600;
font-size: 16px;
padding: 20px 0px 20px 20px;
width: 100%;
}
ul li a::before{
content: '';
border-top: 1px solid #1d5237;
position: absolute;
top: 1px;
width: 100%;
}
ul li a:hover,
ul li a:active,
ul li a:focus{
color: #4a9367;
}
li ul li a{
position: relative;
display: noe;
left: 0px;
color: #cccccc;
background-color: #2a2a2a;
font-weight: 400;
font-size: 16px;
padding: 18px 0px 18px 37px;
width: 100%;
}
li ul li a::before{
content: '';
border-top: 1px solid #666666;
position: absolute;
top: 1px;
width: 100%;
}
li ul li a:hover,
li ul li a:active,
li ul li a:focus{
color: #cccccc;
}
另外,我用li ul li a
到达我的第二个列表元素这是正确的吗?有没有更好的方法来写它?
答案 0 :(得分:1)
尝试在
li ul li:first-child a:before{
content: '';
border-top: 0;
position: absolute;
top: 1px;
width: 100%;
}
答案 1 :(得分:0)
我在你的css代码中评论了不需要的行。(抱歉评论了背景颜色,这是不可见的)
以下是代码的工作示例
ul li a{
position: relative;
left: 0px;
color: #1d5237;
/*background-color: #1a1a1a;*/
font-weight: 600;
font-size: 16px;
padding: 20px 0px 20px 20px;
width: 100%;
}
ul li a::before{
content: '';
border-top: 1px solid #1d5237;
/* position: absolute;*/
top: 1px;
width: 100%;
}
ul li a:hover,
ul li a:active,
ul li a:focus{
color: #4a9367;
}
li ul li a{
position: relative;
display: noe;
left: 0px;
color: #cccccc;
/*background-color: #2a2a2a;*/
font-weight: 400;
font-size: 16px;
padding: 18px 0px 18px 37px;
width: 100%;
}
li ul li a::before{
content: '';
border-top: 1px solid #666666;
/*position: absolute;*/
top: 1px;
width: 100%;
}
li ul li a:hover,
li ul li a:active,
li ul li a:focus{
color: #cccccc;
}
&#13;
<ul>
<li><a href="#">ABOUT OWSD</a></li>
<li><a href="#">WHY OWSD</a>
<ul>
<li><a href="#">Objectives</a></li>
<li><a href="#">Women and Gender</a></li>
<li><a href="#">Success stories</a></li>
<li><a href="#">Gender insite</a></li>
<li><a href="#">Partners</a></li>
</ul>
</li>
<li><a href="#">NETWORK</a></li>
<li><a href="#">CAREER DEVELOPMENT</a></li>
<li><a href="#">RESOURCES</a></li>
<li><a href="#">RESOURCES</a></li>
</ul>
&#13;
谢谢