我有一个图像的描述，当我悬停我的鼠标的图像，它会显示一个列表的图像，它的工作正常。这是代码：

<div class="col-md-2 order-first order-lg-last text-center">

        <div class="dropdown">
            <a id="menu1"  >
              <img class="image" src="{{asset('images/bedframe-1.jpg')}}">
            </a> <br> <br>
            <span class="text-capitalize "><strong>Bedframe</strong> </span>
            <ul class="dropdown-menu text-center" role="menu" aria-labelledby="menu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Canopy Bed</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Bunk Bed</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Day Bed</a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="/category/bedsheet-mattress/canopy-bed">Platform Bed</a></li>
            </ul>
          </div> <br>

      <h3 style="color:black">Featured Deals</h3> <hr>
          <a href="#" id="menu1">
            <img class="product-item" src="{{asset('images/pillow2.jpg')}}">
          </a> <br> <br>
          <span class="text-capitalize" data-toggle="tooltip" data-placement="right" title="Lorem Ipsum y of type and scrambled it"><strong>[COMPANY NAME]</strong>
            <br>

            <span> Pillow,soft,50cm</span>
            <h3><strong>RM20</strong></h3>
            <ul>

              <li>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span>(60) </span>
              </li>
              <ul><br>

    </div>

<style>
  @media (min-width:480px) {
    .dropdown:hover .dropdown-menu {
      display: block;
      margin-top: 0;
      transition: all 1.5s;
      transform: scale(1.0);

      transition: .3s ease-in-out;

    }

  }

  .product-item {

    height: 150px;
    width: 150px;

  }

  ul {

    list-style-type: none;
  }

  .image {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border-radius: 100%;
    height: 200px;
    width: 200px;
  }

  .image:hover {
    transform: scale(0.5);

  }

  .checked {
    color: orange;
  }

</style>

但是，当我在我的移动终端上运行时，当我点击图像时，行为应该显示浏览器列表，但点击图像不会显示浏览器。如何解决此问题？