Given a logical (search engine readable) HTML menu containing an unordered list menu wrapped inside a <nav>, starting with item Home and ending with item Blog. I have tried several things in pure CSS and HTML but cannot achieve what I want.
nav {
text-align:center;
transform: rotate(-90deg) translateX(-240px) translateY(-100px);
margin: 0;
top: 0px;
left: 0px;
position: absolute;
}
nav li{
display: inline-block;
background-color: blue;
height: 24px;
line-height: 24px;
vertical-align: middle;
margin: 5px auto;
padding: 1em;
}
nav li a{
color: #fff;
}
nav li a:hover{
background: black;
}
nav li.selected {
background-color: purple;
}<nav>
<ul>
<li><a href="#">Home</a></li>
<li ><a href="#">Philosophy</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>CodePudding user response：
Don't play a lot with transformation. Use writing-mode then move the style applied to li to a to make the link area bigger.
nav {
top: 0px;
left: 0px;
position: absolute;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
background-color: blue;
writing-mode: vertical-rl; /* */
transform: scale(-1); /* */
margin: 5px 0;
}
nav li a {
color: #fff;
padding: 1em;
display: inline-block;
line-height: 24px;
}
nav li a:hover {
background: black;
}
nav li.selected {
background-color: purple;
}<nav>
<ul>
<li><a href="#">Home</a></li>
<li ><a href="#">Philosophy</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>