Css 移动站点上的下拉菜单
我在一个网站上工作,它有一个下拉菜单,我使布局响应,并添加了移动设备的媒体查询。唯一的问题是,下拉菜单确实会在手机上下拉,尽管它也会激活第一个链接,所以它会直接进入该页面,给你一秒钟的响应时间 我在学校里学到了这一点,我可以发誓这是一个非常简单的解决办法,像onclick或类似的东西。虽然已经很晚了,但我正在努力解决这个问题,却找不到任何解决办法 这是html的下拉列表Css 移动站点上的下拉菜单,css,mobile,drop-down-menu,Css,Mobile,Drop Down Menu,我在一个网站上工作,它有一个下拉菜单,我使布局响应,并添加了移动设备的媒体查询。唯一的问题是,下拉菜单确实会在手机上下拉,尽管它也会激活第一个链接,所以它会直接进入该页面,给你一秒钟的响应时间 我在学校里学到了这一点,我可以发誓这是一个非常简单的解决办法,像onclick或类似的东西。虽然已经很晚了,但我正在努力解决这个问题,却找不到任何解决办法 这是html的下拉列表 <div class="nav"> <div class="links"> &
<div class="nav">
<div class="links">
<ul id="dropdown">
<li>
<a href="index.html"> Tetterode </a>
<ul>
<li><a href="project.html">Project</a></li>
<li><a href="promenade.html">Promenade</a></li>
<li><a href="brochure.html">Brochure</a></li>
<li><a href="impressies.html">Impressies</a></li>
</ul>
</li>
<li>
<a href="oplevering.html">Woningen</a>
<ul>
<li><a href="oplevering.html">Oplevering</a></li>
<li><a href="impressies.html">Impressies</a></li>
</ul>
</li>
<li class="currentpage">
<a href="ligging.html">Locatie</a>
<ul>
<li><a href="ligging.html">Ligging</a></li>
<li><a href="situatie.html">Situatie</a></li>
<li><a href="routeplanner.html" class="smaller">Route<br>planner</a></li>
</ul>
</li>
<li>
<a href="hypotheken.html">Financiering</a>
<ul>
<li><a href="hypotheken.html">Hypotheken</a></li>
</ul>
</li>
<li>
<a href="makelaars.html">Contact</a>
<ul>
<li><a href="makelaars.html">Makelaars</a></li>
</ul>
</li>
</ul>
</div>
</div>
我基本上希望能够单击基本导航项目(tetterode、woningen等),并看到其他项目下降,因此如果我愿意,我实际上有时间单击它们。这是您的代码
我用我的iPhone4和iOS6进行了测试。每当你点击其中一个菜单,你就会被重定向到该菜单中的链接。为了解决这个问题,您需要删除这些链接并将其替换为#,以便您的代码在移动站点上工作
因此,此HTML结构将解决您的问题(仅在移动站点上使用):
-
-
-
-
-
我的回答可能听起来很愚蠢。但是如果你想保持相同的结构和css,这是唯一的方法。享受编码的乐趣 是否要折叠这些项目?因为我在这里没有看到任何下拉列表对不起,我不明白你在说什么?里面有下拉菜单,这是一个功能强大的下拉菜单。最上面的“li”是主菜单项,当你将它们悬停时,会出现“ul”和“li”。虽然你不能在手机上悬停,所以这就是问题所在。看这个:是的,谢谢你的推荐,但这不是我想要的。我想保留我目前的设计和工作,我想保持菜单的原样。谢谢,但该网站不仅是移动的,它只是有移动使用的查询,这仍然是可能的吗?
.nav{
width: 100%;
height:50px;
background-image:url("bg.jpg");
background-repeat:repeat;
text-align:center;
padding-bottom:0px;
margin-bottom:0px;
}
.links ul li {
list-style-type: none;
padding-right: 15px;
height:50px;
display:inline-block;
padding-top:0px;
line-height:50px;
padding-left:14px;
text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
margin-top:0px;
}
.links ul li:hover {
height:50px;
background-color:#b5001e;
display:inline-block;
margin:0px;
}
.links a {
text-transform:uppercase;
font-family:helvetica;
font-size:16px;
color:#fff;
display:inline-block;
font-size:20px;
text-decoration:none;
}
.links a:hover {
background-color:transparent;
}
#dropdown ul{
background-color:#b5001e;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:-2px;
}
#dropdown ul li{
float:none;
}
#dropdown ul a{
white-space:nowrap;
font-size:16px;
}
#dropdown li:hover ul{
left:0;
}
#dropdown li:hover a{
text-decoration:underline;
}
#dropdown li:hover ul a{
text-decoration:none;
}
#dropdown li:hover ul li a:hover{
color:#000;
}
.currentpage{
height:50px;
background-color:#b5001e;
display:inline-block;
}
<div class="nav">
<div class="links">
<ul id="dropdown">
<li>
<a href="#"> Tetterode </a>
<ul>
<li><a href="project.html">Project</a></li>
<li><a href="promenade.html">Promenade</a></li>
<li><a href="brochure.html">Brochure</a></li>
<li><a href="impressies.html">Impressies</a></li>
</ul>
</li>
<li>
<a href="#">Woningen</a>
<ul>
<li><a href="oplevering.html">Oplevering</a></li>
<li><a href="impressies.html">Impressies</a></li>
</ul>
</li>
<li class="currentpage">
<a href="#">Locatie</a>
<ul>
<li><a href="ligging.html">Ligging</a></li>
<li><a href="situatie.html">Situatie</a></li>
<li><a href="routeplanner.html" class="smaller">Route<br>planner</a></li>
</ul>
</li>
<li>
<a href="#">Financiering</a>
<ul>
<li><a href="hypotheken.html">Hypotheken</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="makelaars.html">Makelaars</a></li>
</ul>
</li>
</ul>
</div>
</div>