下面这段代码为什么实现不了鼠标悬浮列表出现

同学你好，css是无法实现移入子级，改变父级的，不过后面学习了js之后，可以用js来实现。可以继续往后学习哦。

希望能帮助到你，祝学习愉快！

这是因为

a:hover li{} 表示的是 匹配li，li要满足条件：li是a的后代节点。

而这里，a其实是跟ul为兄弟节点，li是ul的后代节点，所以li不是a的后代节点，因此该css代码是无效的。

另外，同学你display的属性值也写错了，应该是inline而不是line

这里可以使用这种办法，即：div:hover li {display: inline}。即悬停到祖先元素控制后代元素的显示与隐藏，这样，可以避免，当你鼠标移动到li上的时候，li又隐藏了的情况：

比方说，代码改为：

ul {display: none;}

h2:hover+ul{display:block}

你会发现，当你鼠标悬停再h2上的时候，可以让ul显示出来，但是，当你鼠标移动到列表上的时候，ul就又隐藏了。

实际应用应当是通过悬停来控制菜单的显示与隐藏，如果使用后一种方法，则显示出来的菜单还是没法进行点击选择，因此意义不大。

结论：比较好的实现方法就是：

A {display:none;}
A的父元素:hover A {display: inline;}/*or block inline-block*/

ps: 上面的+号表示后面的元素是前面元素的相邻兄弟节点。

同学你好，1、这里的hover应该设置给div，一个空格的话是后代元素，而a与li不是后代关系哦。建议：可以设置给div。

2、设置为行内元素，应该是inline，少了一个in。如下：

3、建议：可以使用通配符去掉元素的内外边距，例：

4、建议：可以设置下a的样式，字体颜色与下划线等，例：

希望能帮助到你，欢迎采纳。

祝学习愉快！