下拉菜单定位和样式

Question

如何使悬停效果成为下拉列表的全宽，并且文本在悬停在 li 而不是 a 时更改颜色。

所以它应该是一个黑色的下拉菜单，当每个链接悬停在 li 的背景上时，应该更改为rgba(255,255,255, 0.1)并且文本应该更改为rgba(102,245,66, 0.8) li 和部分应该' t 溢出正常的下拉部分（我试过overflow: hidden ）

 .dropdown-content { display: none; position: absolute; background-color: #1c1c1c; min-width: 240px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 1; height: 300px; position: absolute; right: 0; top: 100; } ul { list-style: none; overflow: hidden; } li { font-size: 1em; text-align: center; padding-top: .5em; height: 75px; width: 240px; overflow: hidden; } a { color: #fff; text-decoration: none; font-size: 2rem; font-family: $main-font; width: 240px; } a:hover { color: rgba(102, 245, 66, 0.8); } li:hover { background: rgba(255, 255, 255, .2); color: #8FC3A1; width: 240px; cursor: pointer; } .dropdown:hover .dropdown-content { display: block; }

 <div class="dropdown"> <span><i class="fa fa-bars">Just hover on it</i></span> <div class="dropdown-content"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#lin">Line Up</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div>

Answer 1

我认为你正在寻找这个我不是非常确定，请不要让我知道它是否符合你的要求，解决的办法是改色a ，当我们悬停li

 .dropdown-content { display: none; position: absolute; background-color: #1c1c1c; min-width: 240px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 0; z-index: 1; height: 300px; position: absolute; right: 0; left: 0; } ul { list-style: none; overflow: hidden; margin: 0; padding: 0; } li { font-size: 1em; text-align: center; margin-bottom: 10px; } li:hover { background: rgba(255,255,255, 0.1); color: #8FC3A1; cursor: pointer; } li:hover a{ color: rgba(102,245,66, 0.8) } a { color: #fff; text-decoration: none; font-size: 2rem; font-family: $main-font; width: 240px; } .dropdown:hover .dropdown-content { display: block; }

 <div class="dropdown"> <span><i class="fa fa-bars">fa-bar dropdown</i></span> <div class="dropdown-content"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#lin">Line Up</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div>