展开收起菜单上移动的，而在桌面上

Question

维护哈弗我有悬停使用垂直滑动菜单我的桌面上的一个HTML页面。在iPad上，我可以点击菜单将其展开，但我无法弄清楚如何使它崩溃。我曾尝试使用jQuery，但我似乎无法使其工作。这是我开始的代码。

#navigation_slideout { 
 
\t position: fixed; 
 
\t top: 80px; 
 
\t left: -370px; 
 
\t -webkit-transition-duration: .5s; 
 
\t -moz-transition-duration: .5s; 
 
\t -o-transition-duration: .5s; 
 
\t transition-duration: .5s; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
\t -webkit-box-shadow: 0 0 40px #222; 
 
\t -moz-box-shadow: 0 0 40px #222; 
 
\t box-shadow: 0 0 40px #222; 
 
} 
 

 
#navigation_slideout:hover { 
 
    left: -39px; 
 
} 
 

 
#navigation_slideout ul 
 
{ 
 
list-style: none; 
 
} 
 

 
#navigation_slideout ul li { 
 
\t background: #548EBE; 
 
\t width: 325px; 
 
\t height: 30px; 
 
\t text-align: left; 
 
\t padding-top: 5px; 
 
\t font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif; 
 
\t font-size: 12pt; 
 
\t color:white; 
 
\t font-weight:bold; 
 

 
} 
 
#navigation_slideout ul li a{ 
 
\t color: #000; 
 
\t text-decoration: none; 
 
\t font-weight:bold; 
 
\t display: block; 
 
\t background-color:#548EBE; 
 
\t color:white; 
 
} 
 
#navigation_slideout ul li ul{ 
 

 
width:285px; 
 
} 
 

 
#navigation_slideout ul li ul li { 
 

 
width:10px; 
 
position:relative; 
 
left:-41px; 
 
} 
 

 

 
#navigation_slideout ul li ul li a { 
 
background:#548EBE; 
 
width:326px; 
 
height:30px; 
 
text-align:left; 
 
padding-top:5px; 
 
font-family: helvetica, arial, sans-serif; 
 
font-size: 12pt; 
 
color:white; 
 
font-weight:bold; 
 
} 
 

 
#menu{ 
 
    \t -ms-transform: rotate(-90deg); 
 
\t -webkit-transform: rotate(-90deg); 
 
\t transform: rotate(-90deg); 
 
\t font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif; 
 
\t font-size: 14pt; 
 
\t color:white; 
 
\t font-weight:bold; 
 
\t margin:0px 0px 0px 0px; 
 
\t right:0px; 
 
\t padding:0px 0px 0px 0px 
 

 
} 
 

 
#menu a{ 
 
    \t font-size: 14pt; 
 
\t color:white; 
 
\t font-weight:bold; 
 
\t text-decoration:none; 
 
} 
 

 
table.nospacing { 
 
border-collapse: collapse; 
 
\t border-spacing: 0; 
 
    table-layout: fixed; 
 

 

 
} 
 
table.nospacing th, td { 
 
padding: 0; 
 
    } 
 
    .menu-col{max-width: 30px;}

<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" > 
 
<table class="nospacing" style="border-style:none"> 
 
<tr> 
 
<td> 
 

 
\t \t <ul> 
 
\t \t \t <li><a href="default.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li> 
 
\t \t \t <li><a href="about/default.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a></li> 
 
\t \t \t <li><a href="contact/default.html" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a></li> \t \t \t 
 
\t \t \t <li><a href="faq/default.html" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQs</a></li> 
 
\t \t </ul> 
 
\t \t <hr width="200px"/> 
 
\t \t <ul> 
 
\t \t <!-- #BeginEditable "redlines" --> 
 
\t \t \t <li style="display:none"><a href="#">&nbsp;&nbsp;&nbsp;Redlines</a></li> \t \t \t 
 
\t \t <!-- #EndEditable --> \t \t \t 
 
\t \t </ul> 
 
\t \t </td> 
 
\t \t \t \t <td class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid"><p id="menu"><a href="#">MENU</a></p></td> 
 

 
</tr> 
 
</table>​

Answer 1

的iDevices有哪里哪里悬停状态仍然存在一个奇怪的事情。我通过添加悬停类来解决这个问题。如果您在使用jQuery，你可以做到这一点...

elem.on('mouseenter', function() { 
    $(this).addClass('hover'); 
} 

elem.on('mouseleave', function() { 
    $(this).removeClass('hover'); 
} 

还有其他的修复藏汉...

http://davidwalsh.name/ios-hover-menu-fix

http://www.slickmedia.co.uk/news/blog/glenns-blog/fix-ipad-iphone-css-hover-issues/