Question

我有一个CSS下拉菜单，可以在鼠标悬停时完美运行，但只能部分适用于iPad和iPad。苹果手机。点击下拉列表第一次工作但在后续点击时失败，直到点击主页链接，“重置”菜单。对我来说似乎很奇怪，但也许有人会认识到这种行为。可以在http://raleighfutbol4all.com/

查看菜单

<div id="menu">
<ul>
    <li><a class="link" href="http://raleighfutbol4all.com">Home</a></li>
    <li><a class="sm_parent" onClick="return true">Program</a>
  <ul>
    <li><a class="link" href="/program.php">Methods</a></li>
    <li><a class="link" href="/schedule.php">Schedule</a></li>
        <li><a class="link" href="locations.php">Locations</a></li>
        <li><a class="link" href="reading.php">Reading</a></li>
  </ul>
</li>
    <li><a class="link" class="titlebar" href="contact.php">Contact</a></li>
    <li><a class="sm_parent" onClick="return true">About</a>
  <ul>
    <li><a class="link" href="/about.php">The Coaches</a></li>
    <li><a class="link" href="/mission.php">Mission Statement</a></li>
    <li><a class="link" href="/testimonials.php">Testimonials</a></li>
    <li><a class="link" href="/gallery.php">Gallery</a></li>
  </ul>
</li>
</ul>
</div>  <!-- menu -->

CSS：

#menu
{
  display: block;
  position: absolute;
  white-space:nowrap;
  z-index: 3;
}

#menu a.link:hover
{
  color: #ffffff;
  border: 1px solid #FFE135; 
  border-radius: 6px;
  margin: 0px;  /* needed to offset 1px border */
}

#menu a.sm_parent:hover    /* sm_parent = submenu parent, has no link */
{
  cursor: default;
}

#menu > ul    /* top level ul only */
{
  padding-left: 15px;
  padding-right: 15px;
  margin: 0;
}

#menu ul   /* all ul's*/
{
    display: inline-table;
    position: relative;
    list-style: none;
  z-index: 3;
}

#menu ul li 
{
    float: left;
  text-align: left;
}

#menu ul li a 
{
    display: block; 
  padding: 4px 20px;
    color: #FFE135;   
  text-decoration: none;
  margin: 1px; /* hover will replace this with 1px border, prevents shifting */
  z-index: 3;
}

#menu ul li a:link { color: #FFE135; }
#menu ul li a:visited { color: #FFE135; }
#menu ul li a:active { color: #FFE135;} 

#menu ul li:hover > ul 
{
  visibility: visible;
  opacity: 1.0;
}

#menu ul li ul 
{
  visibility: hidden;
  opacity: 0.0;
  -webkit-transition: all 0.4s ease-in-out 0.0s;
  -moz-transition: all 0.4s ease-in-out 0.0s;
  -ms-transition: all 0.4s ease-in-out 0.0s; 
  -o-transition: all 0.4s ease-in-out 0.0s;
  transition: all 0.4s ease-in-out 0.0s;
}

#menu ul ul 
{
  display: block;
    background: black; 
  border-radius: 8px;
  padding: 2px 8px;
    position: absolute; 
  z-index: 3;

  /*  
    top: 100% works with Chrrome, etc but not with IE, (of course) but not with
    margin and or border values adding margin & border values between top menu (ul)
    and submenu (ul) will require more % value deduction  
  */
  top: 88%; 
}

#menu ul ul li 
{
  display: block;
    position: relative;
  float: none;
}

#menu ul ul > li 
{
  /* submenus with slightly smaller font */
  font-size: 90%;
}

#menu ul ul li a 
{
    padding: 4px 10px;
}   

#menu ul ul ul 
{
  /* 2nd generation submenu open to right of 1st generation dropdown submenus */
    position: absolute; left: 100%; top:0;
}  

#menu ul ul ul > li 
{
  /* This prevents 2nd generation > submenus from having ever diminishing font size*/
  font-size: 100%;
}

Answer 1

首先我注意到网站没有响应。对于像iPod，Ipad和Android手机这样的移动设备，大部分时间下降都不好。但如果你可以使用菜单制作响应式网站。你可以获得非常好的触摸友好的用户体验。

此处示例移动导航：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

iPad上的CSS下拉菜单

1 个答案: