虽然有BUG，但是先这样吧
<style>
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
position: relative;
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
/* cursor: pointer; */
direction: none;
/* border-left: 1px solid rgb(168, 159, 159);
*/
}
a:hover {
background: rgb(37, 37, 37);
color: orange;
opacity: 0.7;
cursor: pointer;
}
a span {
position: absolute;
color: orange;
font-weight: 1000;
right: 11px;
top: 1px;
transform: rotate(-90deg);
}
a ul {
position: absolute;
left: 0;
display: none;
border-left: 1px solid orange;
border-right: 1px solid orange;
}
a ul li {
width: 100px;
background-color: #fff;
color: black;
border-bottom: 1px solid orange;
}
a ul li:hover {
background-color: rgb(241, 239, 67);
color: black;
}
</style>
</head>
<body>
<a>微博<span>＜</span>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</a>
</body>
<script>
var as = document.querySelectorAll('a');
var ul = document.querySelector('ul');
for (var i = 0; i < as.length; i++) {
as[i].onmouseenter = function() {
ul.style.display = 'block'
}
}
for (var i = 0; i < as.length; i++) {
as[i].onmouseleave = function() {
ul.style.display = 'none'
}
}
</script>