私は Android 開発者ではありません。ドロップダウン メニューのある Web サイトを作成しているだけです。このウェブサイトはモバイル デバイスにも対応している必要があると言われました。この Web サイトの作成に Wordpress を使用しています。メニューにウィジェットを使用すると、Android デバイスで動作しませんでした。CSS のみを使用して新しいドロップダウン メニューを作成し、2 台の Android デバイスで再度テストしました。メニューは2段階。レベル 1 をホバーすると (ホバーはモバイル デバイスにとってまったく悪いことだとわかっています)、通常はレベル 2 が表示されます。どちらのレベルのメニュー項目も、クリックすると Web サイトのサブページにリンクします。
Gingerbread を搭載した Samsung Galaxy S2 では、CSS メニューは正常に機能しますが、完全ではありません。レベル 1 (たとえば、"Fruit" と呼ばれる) をクリックすると、"Fruit" ページが開きますが、サブ項目 (たとえば、"Apple" と "Banana") が表示されます。"Apple" または "Banana" をクリックすると、適切なページが呼び出されます。 . 唯一の問題は: 既に "Fruit" ページにいて、メニューの "Fruit" をもう一度クリックしても何も起こらない. それはまったく良くありませんが、私にとっては問題ありません.
残念ながら、Asus Transformer Prime タブレットの Ice Cream Sandwich のメニューに問題があります。レベル 1 のメニュー項目をクリックすると、この項目のページが表示されますが、サブメニューをクリックできません。ページの読み込み中、わずか 1 秒間表示されます。そのため、このデバイスで Web サイトのサブページにアクセスすることはできません。
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; }