Question

Can anyone help me in this problem please. When I bring the mouse over TOYOTA, the HONDA and CONTACT US move forward. I don't want this. I just want that when I bring mouse over TOYOTA and HONDA the next list iten should not move forward. How to fix it. Here is my code.

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

只适用

E/MediaPlayerNative: error (1, -2147483648)
 E/MediaPlayer: Error (1,-2147483648)

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属性。我建议您将物品垂直放置在小型设备上，因为它们太紧了。另外，使用十六进制表示法而不是颜色名称

List items on Navigation bar move forward when I hover the mouse on it

3 个答案: