I have the following menu which works perfectly on desktop. When hover on item, secondary menu appears.On tablet/mobile device this is a click/touchI want the menu hover effect (touch on tablet) to disappear when clicked away from on a tablet/mobile device. E.g. ipad, when click on My Lists, secondary menu shows, but need it to disappear when clicked away from menuIs this possible?CSS:\[code\]* {outline:none; border:none; margin:0; padding:0; font:14px arial,sans-serif;}body {background: url(images/bg.gif) repeat;}#top {background: url(images/top_tile.png) repeat-x; height:140px; width:100%;}.wrap {width:980px; margin:0 auto;}#top1 {height:60px;}.logo {padding-top:10px;}#menu {height:48px;}/*NAV*/#nav{ list-style:none; font-weight:bold; /* Clear floats */ float:left; width:100%;}#nav li{ float:left; margin-right:10px; position:relative;}#nav a{ display:block; padding:20px 25px 7px 15px; color:#333; height:25px; text-decoration:none;}#nav a:hover{ color:#fff; background:#ff9900; text-decoration:none;}/*--- DROPDOWN ---*/#nav ul{ background:#fff; list-style:none; position:absolute; left:-9999px; min-width:200px; border-radius:0px 0px 3px 3px; border:1px solid #ccc;}#nav ul li{ padding-top:1px; float:none; background:#fff; }#nav ul a{ white-space:nowrap; font-size:13px; color:#666; padding: 10px 0px 5px 15px;}#nav li:hover ul{ left:0; }#nav li:hover a{ background:#ff9900; text-decoration:none;}#nav li:hover ul a{ text-decoration:none; background:#fff;}#nav li:hover ul li a:hover{ background:#ff9900; color:#fff;}\[/code\]HTML:\[code\]<body> <div id="top"> <div id="top1" class="wrap"><img src="http://stackoverflow.com/questions/13829747/images/logo.gif" class="logo" /></div> <div id="menu" class="wrap"> <ul id="nav"> <li><a href="http://stackoverflow.com/questions/13829747/#">My Lists</a> <ul> <li><a href="http://stackoverflow.com/questions/13829747/#">List 1</a></li> <li><a href="http://stackoverflow.com/questions/13829747/#">List 2</a></li> <li><a href="http://stackoverflow.com/questions/13829747/#">List 3</a></li> <li><a href="http://stackoverflow.com/questions/13829747/#">View all Lists</a></li> </ul> </li> <li><a href="http://stackoverflow.com/pages/following">Following</a> <ul> <li><a href="http://stackoverflow.com/questions/13829747/#">Follow 1</a></li> <li><a href="http://stackoverflow.com/questions/13829747/#">Follow 2</a></li> <li><a href="http://stackoverflow.com/questions/13829747/#">Follow 3</a></li> <li><a href="http://stackoverflow.com/questions/13829747/#">View all Follows</a></li> </ul> </li> </ul> </div> </div> </div></body>\[/code\]Fiddle
Hide hover on click away touchscreen tablet/mobile device
- Thread starter biggeorge
- Start date