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

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 单击事件