1
我想让页面加载时我的移动菜单加载扩展（仅限顶层链接）。我有第二层嵌套链接，我想隐藏。我敢肯定，这是一个超级简单的修复，但我已经花了一个下午，我的代码，我认为是时候让专业人士摆弄;）页面加载时的扩展移动导航菜单
我的代码： https://jsfiddle.net/ubxsksz2/
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation"><font size="+2">MENU</font></a>
<a href="#" title="Hide navigation"><font size="+2">HIDE MENU</font></a>
<ul>
<li><a href="index.html#quicknav"><b><font color="#CC9933">HOME:</font></b></a></li>
<li>
<a href="firstlevellink.html" title="I want to be seen on page load">FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif"></a>
<ul>
<li><a href="secondlevellink.html" title="I want to be hidden on page load">SECOND LEVEL LINK</a></li>
</ul>
</li>
</ul>
</nav>
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
@media only screen and (max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}