Im trying to get a top boarder on the second list, "chapter 2" in my nav ul li to section it off from the nav ul ul. Heres the code:
nav {
text-align: center;
border: 2px solid #370d6b;
border-radius: 2rem;
margin: 0.5rem auto 1rem;
max-width: 300px;
font-size: 1.25rem;
line-height: 2rem;
border-color: #ffffff;
color: #ffffff;
}
nav ul {
list-style: none;
margin: 5px auto 5px -20px;
}
nav ul ul {
position: relative;
font-size: 1rem;
line-height: 1rem;
border-top: 1px solid #ffffff;
border-margin: -10px;
margin: -2px -10Spx 8px auto;
padding: 20px auto 20px auto;
padding-left: 0px;
list-style: url(img/dark_dudington.png) inside;
}
nav li a {
display: block;
}
nav li a,
li a:visited {
text-decoration: none;
color: #ffffff;
}
nav li a:hover,
li a:focus {
color: #ffffff;
text-decoration: underline;
background-color: #46146e;
}
<nav>
<ul>
<li><a href="#New_Horizons">Chapter 1: New Horizons</a>
<ul>
<li><a href="#A_Mind_Made-Up">A Mind Made-Up</a></li>
<li><a href="#Difficulty_Launching">Difficulty Launching</a></li>
</ul>
</li>
<li><a href="#Chapter2">Chapter 2</a>
<ul>
<li><a href="#Chapter2">**PH_1</a></li>
<li><a href="#Chapter2">**PH_2</a></li>
</ul>
</li>
</ul>
</nav>
Ive tried div code and second-child pseudo-class and a couple very basic methods, but as I am fairly new Im sure I havent exhausted my options.
nav>ulwill select the immediate child of the<nav>which is the first list. Then all we need is to add border-top to the 2nd child list (or every non first list).I've ended up adding this css: