Is there a way to achieve the desired appearance for my navbar like this link? I have tried rotating the text, but the vertical text ends up too far from the horizontal. Any suggestions?
.vertical {
float:right;
writing-mode:tb-rl;/*IE*/
writing-mode:vertical-lr;/* OPera/webkit*/
writing-mode:sideways-lr;/* should be the one */
}
.horizontal {
float:right;
line-height: 0em;
}
li {
display:inline-block;<nav>
<ul class="horizontal">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><i class="far fa-circle"></i></li>
<ul class="vertical">
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</ul>
</nav>