许久已经没有博客了，我都快要自己忘记了。最开始还是挺喜欢写的，但是后来便觉得浪费时间。
直到最近，发现许多东西你要记住的太多了，仅仅是知道恐怕过了一段时间就会忘掉。
button的下拉菜单的css实现
最开始是理解网上的代码，但是我就发现了一个奇怪的事情，什么事情我也懒得说了。直接把问题贴出来吧！下面是关于HTML的代码
<nav>
<button>ALL</button>
<ul>
<div class="cc">
<li><a href="">C语言的历史</a></li>
<li><a href="">Hello world</a></li>
<li><a href="">变量声明</a></li>
<li><a href="">语句</a></li>
<li><a href="">函数声明</a></li>
<li><a href="">数据类型</a></li>
</div>
</ul>
</nav>
下面是关于css的代码
button:hover .cc{
background-color: red;
display: block !important;
}
.cc{
font-size: 23px;
width: 10%;
height: 1.5em;
cursor: pointer;
display: none;
}
我的相反很简单，就是当鼠标指针hover在button上时，显示列表ul中的元素。但是事与愿违，并没有显示，仔细查看网上的示例，我学着和网上的一样，不用button在css悬停，而是在HTML文件创建一个div元素，成功！但是我想知道的是能不能不用div元素直接通过便签实现下拉菜单。于是有了上面的代码。
错误排查过程
1.最开始我以为是css的优先级的问题，也就是.cc比button:hover .cc优先级高。导致即使鼠标悬停，但是由于优先级的原因覆盖了效果。便是在网上查询css的优先级。
在经过反复测试后，发现和优先级并没有多少的关系。
2.后来我便是开始怀疑button并无法进行悬停操作，于是百度button:hover结果发现是可以进行悬停操作。绝望的情况下，我又去看了一遍css的伪类。
3.在网上的教学中，关于css伪类的中有一个实例是简单的工具提示悬停。代码如下
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
</style>
</head>
<body>
<div>鼠标移到我上面来显示 p 元素
<p>哈哈！我在这里！</p>
</div>
</body>
</html>
实现的功能和我想要的差不多，其中代码也很简单。当我看到
<div>鼠标移到我上面来显示 p 元素
<p>哈哈！我在这里！</p>
</div>
时，我突然意识到，之所以使用div的原因是p在里面，而不是在外面。试了一下，发现情况和我的一模一样。这时我恍然大悟，这是因为button:hover .cc是选择button元素的子元素.css然而，并不存在子元素。于是在查询了选择器后，将原本的css文件修改成如下：
button:hover + ul > .cc{
background-color: red;
display: block !important;
}
.cc{
font-size: 23px;
width: 10%;
height: 1.5em;
cursor: pointer;
display: none;
}
结果可以。
总结
问题是因为选择器的原因。从子元素选择器改成了相邻元素选择器和子元素选择器的共同使用。