给定一个逻辑(搜索引擎可读)HTML 菜单,其中包含一个包装在<nav>
,从 item Home 开始,以 item Blog 结束。我已经在纯 CSS 和 HTML 中尝试了几种方法,但无法实现我想要的。
https://jsfiddle.net/6zt3gfp4/
我想要的是这样的:
-
自动将整个垂直菜单与屏幕的左上边缘对齐。
无论列表项中包含的数量和/或长度如何<nav>
!!
-
将每个带下划线的链接的可点击区域扩展到整个蓝色块。
为了便于在悬停并单击菜单项时使用。
-
理想情况下,我们应该抛弃我破碎的开始并选择 FlexBox CSS 设计。
也许这为我们所有人实现这一目标提供了更好的灵活性。那将是一个奖金!
![enter image description here](https://i.stack.imgur.com/ao76y.png)
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>
不要过多地玩弄转型。使用写作模式,然后将应用的样式移动到li
to a
使链接区域更大。
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 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)