Как заставить многоуровневое раскрывающееся меню работать на устройстве с сенсорным экраном с помощью CSS или JavaScript ⇐ Jquery

[Anonymous]

Как заставить многоуровневое раскрывающееся меню работать на устройстве с сенсорным экраном с помощью CSS или JavaScript? Потому что, когда я тестировал свой веб-сайт на устройстве с сенсорным экраном, я щелкнул раскрывающееся меню (которое работало нормально), но когда я попытался избавиться от раскрывающегося меню, я не смог (если я не перезагрузил страницу). Я бы хотел, чтобы он висел на рабочем столе, а не на сенсорных экранах. Возможно ли это вообще? Вот мой текст в формате HTML и CSS:




[*] normalize.min.css">

@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;
}
}

• Menu
  
  Section 1
  
  Subsection 1
• Subsection 2
• Subsection 3
• Subsection 4

[*]Section 1

• Subsection 1
• Subsection 2
• Subsection 3
• Subsection 4

[*]Section 3

• Subsection 1
• Subsection 2
• Subsection 3
• Subsection 4

Подробнее здесь: https://stackoverflow.com/questions/647 ... -using-css