为什么此CSS转换菜单在Chrome - 水平菜单中不起作用

Question

我花了几个小时想知道出了什么问题，并摆弄了我在网上找到的答案，但无法修复它。我能够显示水平菜单，但 li 元素的颜色在悬停时不会改变。请帮忙.我刚刚开始从事一个新的网站项目，是一个菜鸟。这里有一个片段：

ul{
       line-style-type:none;  
       overflow:hidden;
       background-color:#333;
       margin:0;
       padding:0px 
       }
 
    li{
      float:right;
      }
    li a{
	    display:inline-block;
	    color:white;
	    padding:10px 10px;
	    text-decoration:none;
	    text-align:center;
	
        display:block;
    }
    li a: hover{
	    background-color:#223;
	    display:block;
	    position:relative;
     }

<ul>
    <li><a href="#l">About Me</a></li>
    <li><a href="#j">Blog</a></li>
    <li><a href="#k">Contact Me</a></li>
</ul>

Answer 1

如果你想要一个transition，我假设这仅适用于background-color，那么你需要在li a选择器上定义transition。

但是，您的:hover不起作用 b/c 您a :hover，但需要a:hover

这是一个小提琴

<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a></li>
  <li><a href="#">Test 3</a></li>
</ul>
ul {
  list-style:none;  /* changed this as well, was incorrect */
  overflow: hidden;
  background-color: #333;
  margin: 0;
  padding: 0px;
}
li {
  float: right;
}
li a {
  /* you can also use "all", rather than specifying a specific transition, 
     however, when it's not needed, it's best to specify the actual 
     CSS to hit. If you have more than 1 transtion, you can break it up by
     using a comma, such as this: 
     transition: background-color .2s ease-in, color .2s ease-in; 
     Also do not forget to use prefixes for browsers (older), such as 
     -webkit-transition
     -moz-transition
     -ms-transition
     -o-transition
  */
  transition: background-color .2s ease-in; 
  display: inline-block;
  color: white;
  padding: 10px 10px;
  text-decoration: none;
  text-align: center;
  display: block;
}
li a:hover {
  background-color: #223;
  display: block;
  position: relative;
}

Answer 2

也请向我们提供 Html 代码。但从我的角度来看，问题可能就在这里

li { float: right; }

应该是

li { float: left; }

然后

li a: hover{
    background-color:#223;
    display:block;
    position:relative;
}

应该li a:hover a和:hover之间没有空格。

希望这有帮助。

Answer 3

将悬停类替换为：

li a:hover{
            background-color:#223;
            display:block;
            position:relative;
         }

我只是删除了 a 和悬停之间的空格