我不是 Android 开发人员，我只是在创建一个带有下拉菜单的网站。现在有人告诉我，这个网站也必须与移动设备兼容。我使用 Wordpress 创建这个网站，当我为我的菜单使用小部件时，它在 Android 设备上不起作用。我只使用 CSS 创建了一个新的下拉菜单，并在我的 2 台 Android 设备上再次对其进行了测试。菜单有 2 个级别。当第 1 级悬停时（我知道悬停根本不适合移动设备）第 2 级通常会显示。两个级别的菜单项在单击时都链接到网站的子页面。
在我的带有 Gingerbread 的三星 Galaxy S2 上，CSS 菜单运行良好，但并不完美。当第 1 级（例如“水果”被点击时，“水果”页面打开但子项（例如“苹果”和“香蕉”）被显示。如果“苹果”或“香蕉”被点击，相应的页面被调用. 唯一的问题是：如果我已经在“水果”页面上，然后我再次点击菜单中的“水果”，什么也没有发生。这根本不好，但对我来说没关系。
不幸的是，我的 Asus Transformer Prime 平板电脑上的冰淇淋三明治菜单确实有问题。当我单击 1 级菜单项时，会显示该项目的页面，但无法单击子菜单。它在页面加载时仅显示一秒钟。因此，无法在此设备上访问网站的子页面。
我希望我能清楚地描述我的问题，无论我没有 Android 知识，我的英语是否完美。请让我知道我是否应该提供任何 CSS 或 HTML 代码或其他任何内容。感谢您的任何建议和帮助！
这是我的 PHP、HTML 和 CSS 代码：
PHP：
<div id="menu" role="navigation">
<?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu' => 'Categories', 'container_class' => 'main-menu-class',
'container_id' => 'main-menu-id', 'theme_location' => 'header', 'show_home' => true)); ?>
</div> <!-- menu -->
HTML（由 PHP 生成）：
<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
<a href="http://whatever.com/wordpress/?page_id=40">Cupcake Ipsum</a>
<ul class="children">
<li class="page_item page-item-388">
<a href="http://whatever.com/wordpress/?page_id=388">Red Velvet Cupcake</a>
</li>
<li class="page_item page-item-390">
<a href="http://whatever.com/wordpress/?page_id=390">Mango Cupcake</a>
</li>
<li class="page_item page-item-392">
<a href="http://whatever.com/wordpress/?page_id=392">Chocolate Cupcake</a>
</li>
</ul>
</li>
<li class="page_item page-item-43">
<a href="http://whatever.com/wordpress/?page_id=43">Bacon Ipsum</a>
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
<a href="http://whatever.com/wordpress/?page_id=45">Veggie Ipsum</a>
<ul class="children">
<li class="page_item page-item-397">
<a href="http://whatever.com/wordpress/?page_id=397">Tomato</a>
</li>
<li class="page_item page-item-399">
<a href="http://whatever.com/wordpress/?page_id=399">Lettuce</a>
</li>
<li class="page_item page-item-401">
<a href="http://whatever.com/wordpress/?page_id=401">Broccoli</a>
</li>
<li class="page_item page-item-403">
<a href="http://whatever.com/wordpress/?page_id=403">Onion</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS：
.menu {
background-color: #0B5A7D;
display: inline-block;
position: relative; }
#menu .menu-header ul,
div.menu ul {
list-style-type: none;
width: 921px;
margin: 0;
padding: 0; }
#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative; }
#menu ul li:hover a {
background-color: #006699; }
#menu ul li ul li a:hover {
color: #0B5A7D;
font-weight: bold;
background-color: #89b4ca; }
#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 12px; }
.menu ul li {
display: inline-block;
position: relative;
border-left: solid 1px #006699; }
#menu ul li ul li {
display: block;
float: none;
clear: left;
width: 200px;
border: none;
background-color: #006699; }
.menu li ul {
position: absolute; }
.menu li:not(:hover) ul {
display: none; }