0

As title says - I have a little, but annoying problem and cannot seem to find a solution, perhaps someone can help me:

I have a navigation bar with some subcategory menus that drop down on hover, when clicked on subcategory the page loads via AJAX, so the page top including menu does not reload, all works fine on desktop, but on the phone the drop down (which displays on hover), does not disappear when clicked on, but instead stays on all the time (no mouse on phone, so cursor stays on it I guess.)

Code example:

  <ul id="myUL">
  <li id="first_item"><a href="#"> More names</a>
      <div class="subcategories" style="display:none;">
           <ul>
                <li><a href="#">name 1</a></li>
                <li><a href="#">name 2</a></li>
                ....
           </ul>
      </div>
  </li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

style.css

#myUL #first_item:hover .subcategories
{
  display:block;
}

Is there a way to move cursor to a different location on screen or do you know of any other solution?

K.I
  • 568
  • 1
  • 6
  • 19
  • 4
    Maybe post your code so we can see what's going on? – MattHamer5 Nov 26 '19 at 08:53
  • Code is large in size, but anyone who has written a simple menu can imagine the html and css behind it? What exactly would you like to see? – K.I Nov 26 '19 at 08:59
  • You have stated you have a problem; how do you expect anyone to recreate the problem you're having if you don't give us the building blocks? It's your job to create a **[Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)**. – MattHamer5 Nov 26 '19 at 09:01
  • My problem is not with my code, perhaps I written my question incorrectly, my code works fine, the problem is with :hover on mobile phones, I still dont see how simple HTML menu with some CSS is going to help you answer my question, but if you insist I will upload it in a moment. – K.I Nov 26 '19 at 09:05
  • The `:hover` behaviour doesn't exist on touch screen devices. Have a read of this [SO Question](https://stackoverflow.com/questions/6063308/touch-css-pseudo-class-or-something-similar), it gives you some alternatives to `:hover` – MattHamer5 Nov 26 '19 at 09:12

0 Answers0