<header>
<nav>
<ul>
<li>
<a href ="#">
<span class="weight">HOME</span>
</a>
</li>
<li>
<a href="#">
<span class="weight">事業内容</span>
</a>
<ul class="inner-ul">
<li><a href="#">App</a></li>
<li><a href="#">Web</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li><a href="#">
<sapn class="weight">アクセス</sapn>
</a></li>
</ul>
</nav>
</header>nav > ul {
display: inline-block;
position: relative;
}
nav > ul > li {
float: left;
position: relative;
width:;
}
.weight {
font-weight: 900;
display: block;
}
li {
padding: 1em 1em;
list-style: none;
}
.inner-ul {
position: absolute;
left: -30px;
}
.textred {
color: red;
}
.bordernone {
text-decoration: none;
}
.textgreen {
color: green;
}$("li .weight").eq(0).addClass("textred");
$("li:nth-child(3) a").addClass("bordernone");
$("li .weight").eq(-1).addClass("textgreen");
External CSS
This Pen doesn't use any external CSS resources.