2016-04-23 7 views
0

Meine Website unter http://liveapplesprings.com funktioniert nicht auf dem CSS-Menü auf Mobiltelefonen auf anderen Seiten als der Homepage. Die Homepage und die Unterseiten basieren auf der gleichen Dreamweaver-Vorlage, daher verstehe ich nicht, warum es dort funktionieren würde und nicht auf den anderen Seiten. Das Menü wird angezeigt, es ist jedoch nicht anklickbar. Wenn ich das "Inspect Element" des Brower benutze, zeigt es den Link dort an, aber ich erlaube mir nicht, darauf zu klicken.Mein css3-Menü kann nicht auf Handys geklickt werden

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

Fragen Debug-Hilfe zu suchen („warum nicht dieser Code zu arbeiten?“) Muss das gewünschte Verhalten umfasst, um ein bestimmtes Problem oder Fehler und den kürzesten Code erforderlich reproduzieren Sie es in der Frage selbst. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. Siehe: [Erstellen eines minimalen, vollständigen und überprüfbaren Beispiels] (http://stackoverflow.com/help/mcve). – dippas

Antwort

0

ich vor diesem Menü benutzt habe. Schauen Sie sich diese [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>

Verwandte Themen