2015-08-07 5 views
1

У меня есть небольшой фрагмент кода, который отображает небольшое всплывающее меню в CSS, но он не очень хорошо работает с планшетом, потому что «зависание» не может быть реализовано.Вниз меню и планшета

Как вы просто улучшаете меню, которое можно прокручивать одним касанием сенсорного экрана?

<html> 
<head> 
<title>Test</title> 
<style type="text/CSS"> 
#menu ul { 
margin:0; 
padding:0; 
list-style-type:none; 
text-align:center; 
} 
#menu li { 
float:left; 
margin:auto; 
padding:5px; 
background-color: #2672ec; 
font-family: "Segoe UI Light","Segoe UI Web Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","HelveticaNeue-Light","Helvetica Neue",Arial,sans-serif; 
font-weight: bold; 
color:white; 
} 
#menu li a { 
display:block; 
color:white; 
text-decoration:none; 
padding:5px; 
border: 1px solid #2672ec; 
} 
#menu li a:hover { 
border: 1px solid #ffffff; 
} 
#menu ul li ul { 
display:none; 
} 
#menu ul li:hover ul { 
display:block; 
} 

#menu li:hover ul li { 
float:none; 
} 

</style> 
<!--[if !IE]> <--> 
<style type="text/CSS"> 
#menu li ul { 
position:absolute; 
} 
</style> 
<!--> <![endif]--> 
<!--[if IE 8]> 
<style type="text/CSS"> 
#menu li ul { 
position:absolute; 
} 
</style> 
<![endif]--> 

</head> 

<body> 

<div id='menu'> 
<ul> 
    <li>Select menu &#9660; 

    <ul> 
     <li><a href="#">Modify</a></li> 
     <li><a href="#">Delete</a></li> 
    </ul> 

    </li> 
</ul> 
</div> 

</body> 

</html> 

ответ

-1

Что бы вы хотели изменить для работы с сенсорными экранами добавить :focus

принять этот .example:hover{......}

Изменение этой .example:hover, .example:focus{......}

Смежные вопросы