html - Down menu and tablet -
i have small piece of code displays small pop-up menu in css not work tablet because "hover" can not implemented.
how enhance menu can scroll 1 touch of touch screen?
<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 { 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 ▼ <ul> <li><a href="#">modify</a></li> <li><a href="#">delete</a></li> </ul> </li> </ul> </div> </body> </html>
what ever want change work touch screens add :focus
take this .example:hover{......}
change this .example:hover, .example:focus{......}
Comments
Post a Comment