html - 为什么这个 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，那么你需要定义transition在 li a 选择器上。

但是，您的 :hover 不工作，因为您有 a:hover，但需要 a:hover

这是一个 fiddle

<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;
}