我正在使用ul和li来创建仅使用HTML和CSS的响应式导航菜单。我的菜单上嵌套了主列表和隐藏的列表项。隐藏“子项目”,直到在移动设备上按下主菜单为止。
它显示并在桌面浏览器上正常工作。它可以在移动设备上正确显示,但是显示隐藏菜单时会出现问题。
在移动设备上,如果您查看的上一个菜单项少于下一个菜单项,那么浏览器会自动选择您按下的下一个菜单项。
如果您在具有两个子项目的菜单上按下,而下一个菜单有两个以上子菜单,浏览器将自动选择第二个项目。如果最后一个菜单包含五个项目,则如果第五个菜单包含五个以上项目,则将在下一个菜单上选择第五个菜单。如果下一个菜单项比上一个菜单项少,则将不会选择任何内容。
例如,如果您使用我提供的代码并将其加载到手机上,请按菜单1,该菜单包含两个项目-按下的下一个菜单将错误地突出显示项目2。
当这些项目是链接时,浏览器将仅加载该链接-给用户造成重大混乱。
这是我的代码:
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
li {
display: inline-block;
float: left;
margin-right: 0.3em;
}
li a {
display: block;
min-width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
color: #FFF;
background: #25241A;
text-decoration: none;
}
li:hover a {
background: #7FBF7F;
color: #FFF;
border: 0;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
li:hover ul li a {
background: #584D3B;
color: #FFF;
height: 40px;
line-height: 40px;
border: 1px solid #000;
padding: 0.5em 0.8em 0.5em 4.0em;
box-shadow: 5px 1px 12px #5E5E5E;
-webkit-box-shadow: 5px 1px 12px #5E5E5E;
-moz-box-shadow: 5px 1px 12px #5E5E5E;
text-align: left;
}
li:hover ul li a:hover {
background: #7FBF7F;
color: #FFF;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 50px;
padding: 0 1.5em;
}
/* Display the dropdown on hover */
ul li a:hover+.hidden,
.hidden:hover {
display: block;
z-index: 999;
}
/* Hide checkbox */
input.hidden[type=checkbox] {
display: none;
}
/* Show menu when hidden checkbox is checked */
input.hidden[type=checkbox]:checked~#menu,
#support-menu {
display: block;
}
.show-menu {
text-decoration: none;
color: #B59B71;
background: transparent;
text-align: center;
padding: 0;
display: none;
font-weight: bold;
font-size: 1.8em;
line-height: 50px;
height: 50px;
}
#nav-top {
width: 100%;
margin: 0 auto;
padding: 0;
border-bottom: 1px solid #000;
background-color: #25241A;
box-shadow: 2px 4px 12px #888;
-webkit-box-shadow: 2px 4px 12px #888;
-moz-box-shadow: 2px 4px 12px #888;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table;
height: 51px;
content: '';
clear: both;
}
@media (min-width: 700px) {
#menu {
font-size: 0.9em;
margin-left: 0.5em;
}
ul li a {
padding: 0em 0.2em;
min-width: 105px;
font-size: 0.9em;
width: auto;
}
li:hover ul li a {
padding: 0.5em 1.2em;
min-width: 250px;
}
}
@media (min-width: 1024px) {
#menu {
margin-left: 1.6em;
}
ul li a {
padding: 0em 1.0em;
min-width: 130px;
}
}
@media screen and (max-width: 760px) {
ul {
position: static;
display: none;
}
ul li,
li a {
width: 100%;
}
.show-menu {
display: block;
}
#menu {
margin: 0;
}
}
<div id="nav-top">
<label for="show-menu" class="show-menu"><b>☰</b></label>
<input class="hidden" type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#"><b>Main 1</b></a>
<ul class="hidden">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="#"><b>Main 2</b></a>
<ul class="hidden">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li><a href="#"><b>Main 3</b></a>
<ul class="hidden">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</li>
<li><a href="#"><b>Main 4</b></a>
<ul class="hidden">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</li>
<li><a href="#"><b>Main 5</b></a>
<ul class="hidden">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
</ul>
</li>
</ul>
</div>
很明显,除非用户按下,否则不应选择任何项目。我不知道为什么移动浏览器会这样做。
有什么想法吗?
谢谢。