0

I designed a website using HTML and CSS. It includes three levels of navigation menu and it worked well on desktop. But a problem occurs in touch devices (smartphone and tablet) that the sub menu isn't still shown when the element of the parent menu is touched, because there is no crosser to hover over the item.

How can I solve this problem?

Here is the code for the menu:

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta chrset="utf-8">
<meta name="author" content="ralph phillips">
<style>
* {margin:0px; padding:0px;}
body {font-family:verdana;background-color:#ABC;}
h1{text-align:center;border-bottom:2px solid #009;margin-bottom:50px;}
ul#navmenu, ul.sub1, ul.sub2{list-style:none;font-size:9pt;}
ul#navmenu li{width:125px;text-align:center;position:relative;float:left;margin-right:4px;}
ul#navmenu a{text-decoration:none;display:block;width:125px;height:25px;line-height:25px;background-color:#fff;border:1px solid #ccc;border-radius:5px;}
ul#navmenu .sub1 li{}
ul#navmenu .sub1 a{margin-top:5px;}
ul#navmenu .sub2 a{margin-left:10px;}
ul#navmenu li:hover > a{background-color:#cfc;}
ul#navmenu li:hover a:hover{background-color:#ff0;}
ul#navmenu ul.sub1{display:none;position:absolute;top:26px;left:0px;}
ul#navmenu ul.sub2{display:none;position:absolute;top:0px;left:126px;}
ul#navmenu li:hover .sub1{display:block;}
ul#navmenu .sub1 li:hover .sub2{display:block;}
</style>
</head>
<body>

<h1>navigation menu</h1>

<ul id="navmenu">
 <li><a href="#">hyperlink1</a></li>
 <li><a href="#">hyperlink2</a>
  <ul class="sub1">
   <li><a href="#">hyperlink2.1</a></li>
   <li><a href="#">hyperlink2.2</a></li>
   <li><a href="#">hyperlink2.3</a></li>
  </ul>
 </li>
 <li><a href="#">hyperlink3</a></li>
 <li><a href="#">hyperlink4</a>
  <ul class="sub1">
   <li><a href="#">hyperlink4.1</a></li>
   <li><a href="#">hyperlink4.2</a></li>
   <li><a href="#">hyperlink4.3</a>
    <ul class="sub2">
     <li><a href="#">hyperlink4.3.1</a></li>
     <li><a href="#">hyperlink4.3.2</a></li>
     <li><a href="#">hyperlink4.3.3</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><a href="#">hyperlink5</a></li>


</ul>


</body>
</html>
seaotternerd
  • 6,298
  • 2
  • 47
  • 58
Wessam Alkumait
  • 15
  • 7

1 Answers1

0

Can't hover in Touch devices.

For working in touch device, you can use Jquery Click event for this:

$("ul#navmenu li").click(function(){
    $('.sub1').removeClass('display');
    $(this).find('.sub1').addClass('display');
})

DEMO, Complete Code

Manwal
  • 23,450
  • 12
  • 63
  • 93