当我将鼠标悬停在导航栏上时，导航栏上的列表项会向前移动

Question

任何人都可以帮我解决这个问题。 当我将鼠标移到丰田上时，本田和CONTACT US前进。 我不要这个 我只希望当我将鼠标移到丰田和本田上时，下一个列表不应前进。 如何解决。 这是我的代码。

 body {background-color: black;} ul {list-style: none; margin: 0px; padding: 0px; } ul li {float: left; } li ul {display: none;} ul li a {display:block; text-decoration: none; padding:30px 60px; color: lightgray; } ul li a:hover {background: white; color: red; } li:hover ul { display:block; } li:hover li{ float: none; background: red; }

 <body> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT US</a></li> <li><a href="#">TOYOTA</a> <ul> <li><a href="#">TOYOTA COROLLA PRIUS</a></li> <li><a href="#">TOYOTA COROLLA ALTIS</a></li> </ul> </li> <li><a href="#">HONDA</a> <ul> <li><a href="#">HONDA</a></li> <li><a href="#">HONDA</a></li> </ul> </li> <li><a href="#">CONTACT US</a></li> </ul> </body>

Answer 1

您需要将ul li元素的宽度设置为固定值。 否则，“ TOYOTA”元素的宽度将改变，因此将其移到旁边。

Answer 2

只需申请

li:hover ul{
  position: absolute;
}

Answer 3

您可以使用此代码

body > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  background-color: #000;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  padding: 10px;
  color: #CCC;
}

ul li a:hover {
  background-color: #FFF;
  color: #F00;

}

li:hover ul {
  display: block;
}

li:hover li {
  background-color: #F00;         
}

@media all and (min-width: 992px) {
  body > ul {
    flex-direction: row;
    width: 50%;
    justify-content: stretch;
    align-items: flex-start;
    margin-left: auto;
    text-align: left;
  }

  body > ul > li {
    width: 20%;
  }
}

如果有其他解决方案，请避免使用float和position属性。 我建议您将物品垂直放置在小型设备上，因为它们太紧了。 另外，使用十六进制表示法而不是颜色名称

当我将鼠标悬停在导航栏上时，导航栏上的列表项会向前移动

问题描述

3 个解决方案

解决方案1
0 2018-12-19 12:02:58

解决方案2
0 已采纳 2018-12-19 12:04:41

解决方案3
0 2018-12-19 12:41:36

当我将鼠标悬停在导航栏上时，导航栏上的列表项会向前移动

问题描述

3 个解决方案

解决方案1 0 2018-12-19 12:02:58

解决方案2 0 已采纳 2018-12-19 12:04:41

解决方案3 0 2018-12-19 12:41:36

解决方案1
0 2018-12-19 12:02:58

解决方案2
0 已采纳 2018-12-19 12:04:41

解决方案3
0 2018-12-19 12:41:36