光标悬停在子菜单项上答案

【问题标题】：Hover on sub menu item when cursor is over it光标悬停在子菜单项上
【发布时间】：2015-10-18 01:36:53
【问题描述】：

我知道这是一个初学者的问题，但我每次尝试都失败了。当我将光标指向它时，我试图让我的子菜单项发光（使用悬停），但我无法做到。

这是我的 CSS 代码：

 /* submenu */

.main-menu li ul {
  margin-top: 0;
  left: 0;
}
.main-menu ul {
  display: none;
  position: absolute;
  top: 101%;
  padding: 0;
  z-index: 1000;
  background: #333;
  padding: 0.4em 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 155px;
  list-style: none;
}

.main-menu ul li {
  float: none;
  position: relative;
  width: auto;
  text-align: left;
  padding: 4px 10px;
  margin-top: -1px;

}

.main-menu ul li a {
    line-height: 23px;
    padding: 10px;
}

.main-menu ul ul {
  position: absolute;
  left: 100%;
  top: 0%;
}

 .main-menu li:hover > ul {
  display: block;
  color: #eee;
}

【问题讨论】：

我们还需要查看您的 HTML。

标签： css menu hover

【解决方案1】：

查看 w3 学校关于悬停状态的文档：

http://www.w3schools.com/cssref/sel_hover.asp

来自文档：

定义和用法 :hover 选择器用于选择元素当您将鼠标悬停在它们上时。提示： :hover 选择器可用于所有元素，不仅在链接上。提示：使用 :link 选择器样式链接到未访问的页面， :visited 选择器样式链接访问页面，使用 :active 选择器设置活动链接的样式。
注意： :hover 必须在 :link 和 :visited 之后（如果它们存在）在CSS定义中，为了有效！

【讨论】：