2016-04-23 4 views
0

私のウェブサイトhttp://liveapplesprings.comは、ホームページ以外のページの携帯電話のCSSメニューでは動作しません。ホームページとサブページは、同じDreamweaverテンプレートに基づいているため、他のページでは動作しない理由を理解できません。メニューは表示されますが、クリックできません。ブラウザーの "Inspect element"を使用するとリンクが表示されますが、クリックすることはできません。携帯電話でcss3メニューをクリックできない

ul#css3menu1{ 
 
\t margin:0;list-style:none;padding:0;background-color:none;border-width:0;border-style:solid;border-color:;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px; 
 
\t *display:inline;} 
 
ul#css3menu1 li{ 
 
\t display:block;white-space:nowrap;font-size:0;float:left;} 
 
* html ul#css3menu1 li a{ 
 
\t display:inline-block;} 
 
ul#css3menu1>li{ 
 
\t margin:0;} 
 
ul#css3menu1 a:active, ul#css3menu1 a:focus{ 
 
\t outline-style:none;} 
 
ul#css3menu1 a{ 
 
\t display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;color:#1b5732;cursor:default;padding:10px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;} 
 
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{ 
 
\t border-style:none;color:812529;} 
 
ul#css3menu1 > li.switch{ 
 
\t display:none;cursor:pointer;width:25px;height:20px;padding:10px;} 
 
ul#css3menu1 > li.switch:before{ 
 
\t content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#1b5732;-moz-box-shadow:0 8px #1b5732, 0 16px #1b5732;-webkit-box-shadow:0 8px #1b5732, 0 16px #1b5732;box-shadow:0 8px #1b5732, 0 16px #1b5732;} 
 
ul#css3menu1 > li.switch:hover:before{ 
 
\t background:812529;-moz-box-shadow:0 8px 812529, 0 16px 812529;-webkit-box-shadow:0 8px 812529, 0 16px 812529;box-shadow:0 8px 812529, 0 16px 812529;} 
 
.c3m-switch-input{ 
 
\t display:none;} 
 
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{ 
 
\t border-style:none;color:812529;text-decoration:none;} 
 
ul#css3menu1 li.topmenu>a{ 
 
\t background-color:transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;} 
 
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu > a.pressed{ 
 
\t background-color:transparent;} 
 
@media screen and (max-width: 899px) { 
 
\t ul#css3menu1 > li { 
 
\t \t position: initial;} 
 
\t ul#css3menu1 ul .submenu,ul#css3menu1 li > ul { 
 
\t \t left: 0; right:auto; top: 100%;} 
 
\t ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column { 
 
\t \t -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;} 
 
} 
 
@media screen and (max-width: 898px) { 
 
\t ul#css3menu1 { 
 
\t \t width: 100%;} 
 
\t ul#css3menu1 > li { 
 
\t \t display: none; \t \t position: relative; \t \t width: 100% !important;} 
 
\t ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li { 
 
\t \t display: block;} 
 
\t ul#css3menu1 > li.switch > label { \t \t position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}}
<div id="navblock"> 
 
<div class="container"> 
 
<div id="topnav"> 
 
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input"> 
 
<ul id="css3menu1" class="topmenu"> 
 
\t <li class="switch"><label onclick="" for="css3menu-switcher"></label></li> 
 
\t <li class="topmenu"><a href="index.html" style="height:18px;line-height:18px;">HOME</a></li> 
 
\t <li class="topmenu"><a href="about.html" style="height:18px;line-height:18px;">ABOUT US</a></li> 
 
\t <li class="topmenu"><a href="lots.html" style="height:18px;line-height:18px;">LOTS AVAILABLE</a></li> 
 
\t <li class="topmenu"><a href="recreation.html" style="height:18px;line-height:18px;">RECREATION</a></li> 
 
\t <li class="topmenu"><a href="contact.php" style="height:18px;line-height:18px;">CONTACT</a></li> 
 
\t <li class="topmenu"><a href="news.html" style="height:18px;line-height:18px;">NEWS</a></li> 
 
</ul></div> 
 
</div></div>

+0

の質問を見てください質問自体にそれを再現する。明確な問題文がない質問は、他の読者にとって有用ではありません。参照:[最小限で完全で検証可能なサンプルの作成方法](http://stackoverflow.com/help/mcve) – dippas

答えて

0

私は前にそのメニューを使用しました。希望の動作、特定の問題やエラーと必要な最短のコードにが含まれている必要があり、デバッグのヘルプを(「なぜこのコードは動作していない?」)を探して、この[http://codepen.io/mlegg10/pen/RaBJwG]

ul#css3menu1, ul#css3menu1 ul { 
 
    margin: 0; 
 
    list-style: none; 
 
    padding: 0; 
 
    border-width: 0; background-color:none; 
 
    border-style: none; 
 
} 
 
ul#css3menu1 li:hover > * { 
 
    display:block; 
 
} 
 
ul#css3menu1 li { 
 
    position: relative; 
 
    display: block; 
 
    white-space: nowrap; 
 
    font-size: 0; 
 
    float: left; 
 
} 
 
ul#css3menu1 li:hover { 
 
    z-index: 1; 
 
} 
 
ul#css3menu1{ 
 
    font-size: 0; 
 
    z-index: 999; 
 
    position: relative; 
 
    display: inline-block; 
 
    zoom: 1; 
 
    padding: 0; 
 
    *display: inline; 
 
} 
 
* html ul#css3menu1 li a { 
 
    display: inline-block; 
 
} 
 
ul#css3menu1 > li { 
 
    margin: 0; 
 
} 
 
ul#css3menu1 a:active, ul#css3menu1 a:focus { 
 
    outline-style: none; 
 
} 
 
ul#css3menu1 a { 
 
    display: block; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    font: bold 14px Ubuntu; 
 
    color: #000000; 
 
    text-shadow: #FFF 0 0 1px; 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    background-color: #c1c1c1; 
 
    background-image: url("mainbk.png"); 
 
    background-repeat: repeat; 
 
    background-position: 0 0; 
 
    border-width: 0 0 0 1px; 
 
    border-style: solid; 
 
    border-color: #C0C0C0; 
 
} 
 
ul#css3menu1 ul li { 
 
    float: none; 
 
    margin: 10px 0 0; 
 
} 
 
ul#css3menu1 ul a { 
 
    text-align: left; 
 
    padding: 4px; 
 
    background-color: #FFFFFF; 
 
    background-image: none; 
 
    border-width: 0; 
 
    border-radius: 0px; 
 
    -moz-border-radius: 0px; 
 
    -webkit-border-radius: 0px; 
 
    font: 14px Ubuntu; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed { 
 
    background-color: #f8ac00; 
 
    border-color: #C0C0C0; 
 
    border-style: solid; 
 
    color: #000000; 
 
    text-shadow: #FFF 0 0 1px; 
 
    background-image: url("mainbk.png"); 
 
    background-position: 0 100px; 
 
    text-decoration: none; 
 
} 
 
ul#css3menu1 span { 
 
    display: block; 
 
    overflow: visible; 
 
    background-position: right center; 
 
    background-repeat: no-repeat; 
 
    padding-right: 0px; 
 
} 
 
ul#css3menu1 ul li:hover > a, ul#css3menu1 ul li a.pressed { 
 
    background-color: #FFFFFF; 
 
    background-image: none; 
 
    color: #868686; 
 
    text-decoration: none; 
 
} 
 
ul#css3menu1 li.topfirst > a { 
 
    border-radius: 5px 0 0 5px; 
 
    -moz-border-radius: 5px 0 0 5px; 
 
    -webkit-border-radius: 5px; 
 
    -webkit-border-top-right-radius: 0; 
 
    -webkit-border-bottom-right-radius: 0; 
 
} 
 
ul#css3menu1 li.toplast>a{ 
 
\t border-radius: 0 5px 5px 0; 
 
    -moz-border-radius: 0 5px 5px 0; 
 
    -webkit-border-radius: 0; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
}
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input"> 
 
<ul id="css3menu1" class="topmenu"> 
 
\t <li class="switch"><label onclick="" for="css3menu-switcher"></label></li> 
 
\t <li class="topmenu"><a href="index.html" style="height:18px;line-height:18px;">HOME</a></li> 
 
\t <li class="topmenu"><a href="about.html" style="height:18px;line-height:18px;">ABOUT US</a></li> 
 
\t <li class="topmenu"><a href="lots.html" style="height:18px;line-height:18px;">LOTS AVAILABLE</a></li> 
 
\t <li class="topmenu"><a href="recreation.html" style="height:18px;line-height:18px;">RECREATION</a></li> 
 
\t <li class="topmenu"><a href="contact.php" style="height:18px;line-height:18px;">CONTACT</a></li> 
 
\t <li class="topmenu"><a href="news.html" style="height:18px;line-height:18px;">NEWS</a></li> 
 
</ul></div> 
 
</div>

関連する問題