在下拉菜单中，鼠标只能移动到一半，为什么

Question

html代码：      <div id="buttondrow">        <button>更多产品</button>        <div id="menudrow">           <span id="more">更多产品</span>           <hr color="#e8e8e8" size="1px">           <img src="1.png" alt="music">           <a href="">音乐</a>           <hr color="#e8e8e8" size="1px">           <img src="2.png" alt="picture">           <a href="">图片</a>           <hr color="#e8e8e8" size="1px">           <img src="3.png" alt="knowlege">           <a href="">知道</a>           <hr color="#e8e8e8" size="1px">           <img src="4.png" alt="words">           <a href="">文库</a>           <hr color="#e8e8e8" size="1px">           <img src="5.png" alt="loundlist">           <a href="">风云榜</a>           <hr color="#e8e8e8" size="1px">           <a href="" style="text-decoration:underline; margin-top:15px;">全部产品&gt;&gt</a>        </div>CSS代码：#buttondrow{display:inline-block;}#menudrow a,img{display:block;}#menudrow img{  margin:0 auto;  padding-top:15px;}#menudrow a{  padding-bottom:12px;  padding-top:5px;  font-weight:normal;  text-decoration:none;}#menudrow a:hover{text-decoration:underline; color:black;}#more{display:block; padding-bottom:10px; padding-top:20px; padding-left:12px;}#menudrow{  width:85px;  height:100%;  background-color:#ffffff;  position:absolute;  border-left:1px solid #e8e8e8;  text-align:center;  top:0px;  right:0px;  display:none;}button{  display:inline-block;  width:60px;  height:23px;  font-size:12px;  color:white;  background-color:rgb(51,173,255);  border:none;  margin-left:3px;}#buttondrow:hover #menudrow{display:block;}

Answer 1

你这只是单纯的hover事件，没有任何意义

需要鼠标移入 然后进行选择的  需要用到 js 事件

鼠标移入 移出事件 onmouseover onmouseout或是onclick 单击事件