0
我的網站http://liveapplesprings.com在主頁以外的頁面上的手機上的CSS菜單不起作用。主頁和子頁面基於相同的Dreamweaver模板,所以我不明白爲什麼它會在那裏工作,而不是在其他頁面。該菜單顯示,但它不可點擊。當我使用瀏覽器的「檢查元素」時,它會顯示鏈接,但不會允許我點擊它。我的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>
問題尋求幫助調試(「爲什麼不是這個代碼的工作?」)必須包括所期望的行爲,一個特定的問題或錯誤的和必要的最短的代碼在問題本身中重現它。沒有明確問題陳述的問題對其他讀者無益。請參閱:[如何創建最小,完整和可驗證示例](http://stackoverflow.com/help/mcve)。 – dippas