给定一个逻辑(搜索引擎可读)HTML菜单，其中包含一个包裹在<nav>中的无序列表菜单，从item Home开始，到item Blog结束.我已经try 了一些纯CSS和HTML的东西，但无法实现我想要的.
100
我想要的是:
-
Align the whole vertical menu to the top left edge of the screen, automatically.
Regardless of the number of and/or length of the list items contained in the<nav>!! -
Expand the clickable area of each underlined link to its entire blue block.
For ease of use when hovering and clicking a menu item. -
Ideally we should leave my broken start behind and opt for a FlexBox CSS design.
Perhaps that gives us all better flexibility for achievng this. That would be a bonus!
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 class="selected"><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>