0

How do I make a multi-level dropdown menu work on a touchscreen device using css or javascript? Because when I tested out my website on a touchscreen device I clicked on the dropdown menu (which worked fine), but when I tried to get rid of the dropdown menu I couldn't (unless I reloaded the page). I would like it to have it hover on desktop and not hover on touchscreens. Is that even possible? Here's my html and css text:

    <!DOCTYPE HTML> 
<html lang="en"> 
<head> 
   <meta name="viewport" content="width=device-width, initial-scale=1" /> 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/ 
   normalize.min.css"> 
   <style> 
     @media (max-width: 640px) { 
       .main-navigation{ 
         position: absolute; 
         top: 166px; 
         left: 173px; 
       } 
       ul { 
         list-style: none; 
         padding: 0; 
         margin: 0; 
         background: #6e151e; 
         border-radius: 5px; 
       } 
       ul li { 
         display: block; 
         position: relative; 
         float: left; 
         background: #6e151e; 
         border-radius: 5px; 
         width: 130px; 
       } 
       li ul { 
         display: none; 
         position: absolute; 
         top: 37px; 
         left: 0px; } 
       ul li a { 
         display: block; 
         padding: 1em; 
         text-decoration: none; 
         white-space: nowrap; 
         color: #fff; 
         font-family: Helvetica; 
         font-size: 11px; 
         padding-top: 12px; 
         padding-bottom: 12px; 
         font-weight: 70000px; 
         border-radius: 5px; 
         text-align: center; 
         border-right: none; 
       } 
       ul li a:hover { 
         background: #054075; 
         transition: .4s ease; 
       } 
       li:hover > ul { 
         display: block; 
         position: absolute;          
         transition: .4s ease; 
       } 
       li:hover li { 
         float: none; 
         transition: .4s ease; } 
       li:hover a { 
         background: #6e151e; 
         transition: .4s ease; 
       } 
       li:hover li a:hover { 
         background: #054075; 
         transition: .4s ease; 
       } 
       @media (max-width: 640px) { 
       ul ul ul { 
         border-left: 1px solid #fff; 
         left: 130px; 
         top: 0px; 
       } 
     }
     </style>
</head> 
<body> 
   <ul class="main-navigation"> 
     <li class="Menu"><a href="#">Menu</a> 
   <ul> 
     <li><a href="#">Section 1</a> 
   <ul> 
     <li><a href="#">Subsection 1</a></li> 
     <li><a href="#">Subsection 2</a></li> 
     <li><a href="#">Subsection 3</a></li> 
     <li><a href="#">Subsection 4</a></li> 
   </ul> 
   </li> 
     <li><a href="#">Section 1</a> 
   <ul> 
     <li><a href="#">Subsection 1</a>
   </li> 
     <li><a href="#">Subsection 2</a></li> 
     <li><a href="#">Subsection 3</a></li> 
     <li><a href="#">Subsection 4</a></li> 
   </ul> 
   </li> 
     <li><a href="#">Section 3</a> 
   <ul> 
     <li><a href="#">Subsection 1</a>
   </li> 
     <li><a href="#">Subsection 2</a></li> 
     <li><a href="#">Subsection 3</a></li> 
     <li><a href="#">Subsection 4</a>
   </li> 
   </ul> 
   </li> 
   </ul> 
   </li> 
 </body> 
</html>
Nicholas Davies
  • 31
  • 2
  • 1
    https://stackoverflow.com/questions/11850466/mobile-touch-device-friendly-drop-down-menu-in-css-jquery Here are some JS clues. Use return typeof window.ontouchstart !== 'undefined'; .click and event.preventDefault(); Play with this jsfiddle. https://jsfiddle.net/i_like_robots/6JbtX/ – react_or_angluar Nov 07 '20 at 22:01

1 Answers1

1

like this? ... bootstrap...

       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Villa borghese</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">a</a></li>
        
      
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">b<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">bo</a></li>
            <li><a href="#">ba</a></li>
            <li><a href="#">bb</a></li>
            <li><a href="#">bc</a></li>
        <li><a href="#">bd</a></li>
        <li><a href="#">be</a></li>   
        <li><a href="#">bf</a></li>
          </ul>
        </li>
        <li><a href="#">c</a></li>
       <li><a href="#">d</a></li>
       <li><a href="#">e</a></li>

      </ul>
      </ul>
    </div>
  </nav>
my profile
  • 37
  • 9
  • This code would be great, but I want a "multi-level" dropdown menu. Try looking at my code in the Google Chrome browser and choose the iPhone se device to see what my code looks like. – Nicholas Davies Nov 09 '20 at 00:50