在html中悬停为ul的背景颜色更改

Question

每当我将鼠标悬停在ul上时，必须为列表项background color和<i>标记更改<a>。

CSS

.mainlist {
    list-style: none;
    margin-top: 50px;
    margin-left: 15px;
}

.submenu {
    list-style: none;
    display: list-item;
    margin: 0px;
    padding: 0px;
    width: 15px;
}

.submenu li {
    margin-top: 10px;
    float: left;
    display: inline;
    margin: 5px;
    text-align: center;
}

.submenu li i {
    font-size: 25px;
    color: white;
}

.submenu li a {
    margin-top: 20px;
    font-size: 20px;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

HTML

<div style="float:left;margin-left:-250px;width:200px;background-color:dimgray;">
    <nav id="sidenav">
        <ul class="mainlist">
            <ul class="submenu">
                <li><i class="fa fa-home"></i></li>
                <li><a href="#">Home</a></li>
            </ul>
        </ul>
    </nav>
</div>

我该怎么做？我想要这样的东西：

Answer 1

要在悬停时更改children's外观，请执行以下操作：

.submenu:hover li {
    background:red;
}

<强>更新

添加了一个代码段以显示您想要的效果。

.mainlist {
  list-style: none;
  display:block;
  background:#35414f;
  position:relative;
  width:200px;
  padding:50px;
  margin:0;
}

.mainlist li {
  display: block;
  text-align: center;
  color: #808b97;
  width:100%;
  padding:10px 0;
  cursor:pointer;
  border-bottom:1px solid #3a4654;
}

.mainlist li:hover {
  background:#1eae9a;
  color:white;
}

.mainlist li:hover .submenu li a {
  color:white;
}

.submenu {
  list-style: none;
  display: list-item;
  margin: 0;
  padding: 0;
}

.submenu li {
  display:block;
  color: #808b97;
  margin: 10px 0 0;
  padding:0;
  border:none;
}

.submenu li i {
    display:inline-block;
    font-size: 25px;
    color:inherit;
}

.submenu li a {
    color: inherit;
    text-decoration:none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <nav id="sidenav">
        <ul class="mainlist">
            <li>Lorem Ipsum</li>
            <li>
              Lorem Ipsum
              <ul class="submenu">
                  <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                  <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
              </ul>
            </li>
        </ul>
    </nav>
</div>

注意：请务必始终将子菜单列表包装到另一个li标签中。

<ul class="mainmenu">
 <li>
  <ul class="submenu"></ul>
 </li>
</ul>

更新2： CSS更改+添加图标字体

Answer 2

您必须使用pseudo class :hover，就像这样

.submenu:hover li{
    background-color:green;
}

并且文字也要改变颜色

.submenu:hover li > a{
   color:black;
}

这是jsfiddle

Answer 3

使用css :hover selector

.submenu:hover li{
   background-color: black /* or any color you want */;
}

另外，将ul元素作为另一个ul元素的子元素放置是不正确的

检查一下： correct semantics for ul in ul