Question

我的http://liveapplesprings.com网站没有在主页以外的网页上的手机上使用CSS菜单。主页和子页面基于相同的Dreamweaver模板，因此我不明白为什么它会在那里工作而不在其他页面中。菜单显示但不可点击。当我使用浏览器的“Inspect元素”时，它显示了那里的链接，但是不允许我点击它。

ul#css3menu1{
	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;
	*display:inline;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;float:left;}
* 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: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{
	border-style:none;color:812529;}
ul#css3menu1 > li.switch{
	display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu1 > li.switch:before{
	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{
	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{
	display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{
	border-style:none;color:812529;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
	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{
	background-color:transparent;}
@media screen and (max-width: 899px) {
	ul#css3menu1 > li {
		position: initial;}
	ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {
		left: 0; right:auto; top: 100%;}
	ul#css3menu1 .submenu,ul#css3menu1 ul,ul#css3menu1 .column {
		-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) {
	ul#css3menu1 {
		width: 100%;}
	ul#css3menu1 > li {
		display: none;		position: relative;		width: 100% !important;}
	ul#css3menu1 > li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li {
		display: block;}
	ul#css3menu1 > li.switch > label {		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">
	<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
	<li class="topmenu"><a href="index.html" style="height:18px;line-height:18px;">HOME</a></li>
	<li class="topmenu"><a href="about.html" style="height:18px;line-height:18px;">ABOUT US</a></li>
	<li class="topmenu"><a href="lots.html" style="height:18px;line-height:18px;">LOTS AVAILABLE</a></li>
	<li class="topmenu"><a href="recreation.html" style="height:18px;line-height:18px;">RECREATION</a></li>
	<li class="topmenu"><a href="contact.php" style="height:18px;line-height:18px;">CONTACT</a></li>
	<li class="topmenu"><a href="news.html" style="height:18px;line-height:18px;">NEWS</a></li>
</ul></div>
</div></div>

Answer 1

我以前用过这个菜单。看看这个[http://codepen.io/mlegg10/pen/RaBJwG]

＆＃13;

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{
	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;
}

＆＃13;

<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
<ul id="css3menu1" class="topmenu">
	<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
	<li class="topmenu"><a href="index.html" style="height:18px;line-height:18px;">HOME</a></li>
	<li class="topmenu"><a href="about.html" style="height:18px;line-height:18px;">ABOUT US</a></li>
	<li class="topmenu"><a href="lots.html" style="height:18px;line-height:18px;">LOTS AVAILABLE</a></li>
	<li class="topmenu"><a href="recreation.html" style="height:18px;line-height:18px;">RECREATION</a></li>
	<li class="topmenu"><a href="contact.php" style="height:18px;line-height:18px;">CONTACT</a></li>
	<li class="topmenu"><a href="news.html" style="height:18px;line-height:18px;">NEWS</a></li>
</ul></div>
</div>

＆＃13;

我的css3菜单无法在手机上点击

1 个答案: