虽然有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>