Zurb foundation 搜索框隐藏链接 我想知道这是否是一个基础错误，或者如果我在代码中漏掉了什么东西。我的导航栏结构如下： <div class="sticky noprint"> <nav class="top-bar" data-topbar role="navigation"> <ul class="title-area"> <!-- This li needs to be here for for some strange reason to make the mobile menu work --> <li class="name"> <!-- <h1><a href="">Home</a></h1> --> </li> <li class="toggle-topbar menu-icon"> <a href="#"><span>Menu</span></a> </li> </ul> <section class="top-bar-section"> <!-- Left Nav Section --> <ul class="left"> <!-- Class Dropdown --> <!-- <li><img src="background180.png" alt="background120" width="225" height="60"></li> --> <li class="has-dropdown"> <a href="classes.php">Courses</a> <ul class="dropdown"> <li><a href="classes.php">All Classes</a></li> <li class="has-dropdown"> <a href="#">Course Admin</a> <ul class="dropdown"> <li><a href="searchcourse.php">Search for a Course</a></li> <li><a href="searchcourse.php">Edit a Course</a></li> <li><a href="editcourse.php">Add a Course</a></li> </ul> </li> </ul> </li> <!-- Class Dropdown Ends --> <!-- Learner Dropdown --> <li class="has-dropdown"> <a href="searchstu.php">Learner</a> <ul class="dropdown"> <li><a href="searchstu.php">Search for a Learner</a></li> <li><a href="editstudent.php">Add a Learner</a></li> <li><a href="searchstu.php">Edit a Learner</a></li> <li><a href="selectstu.php?all=true">List All Active Learners</a></li> </ul> </li> <!-- Learner Dropdown Ends --> <!-- Grades Dropdown --> <li class="has-dropdown"> <a href="#">Grades</a> <ul class="dropdown"> <li class="has-dropdown"> <a href="#">View and Enter Grades</a> <ul class="dropdown"> <li><a href="gradesbycourse.php">All Courses</a></li> </ul> </li> <li class="has-dropdown"> <a href="#">Grade Templates</a> <ul class="dropdown"> <li><a href="addgradetemplate.php">Create Template</a></li> <li><a href="editgradetemplate.php">Active Templates</a></li> <li><a href="editgradetemplate.php?all=true">All Templates</a></li> </ul> </li> </ul> </li> <!-- Grades Dropdown Ends --> <!-- Employee Dropdown --> <li class="has-dropdown"> <a href="searchemp.php">Employee</a> <ul class="dropdown"> <li><a href="editemp.php">Add an Employee</a></li> <li><a href="searchemp.php">Edit an Employee</a></li> <li><a href="searchemp.php">Search for an Employee</a></li> </ul> </li> <!-- Employee Dropdown Ends --> <!-- Reports Dropdown --> <li class="has-dropdown"> <a href="#">Reports</a> <ul class="dropdown"> <li class="has-dropdown"> <a href="#">Program</a> <ul class="dropdown"> <li><a href="newstus.php">New Registrations</a></li> <li><a href="email.php?program=1">Email All Active Students</a></li> <!-- <li><a href="email.php?program=1">Email All Active Students Using Your Default Client</a></li> --> <li><a href="reports.php">Weekly Course Report (Your Courses)</a></li> <li><a href="reportsactive.php">Weekly Course Report (Active Courses)</a></li> <li><a href="reportsinactive.php">Weekly Class Report (Inactive Courses)</a></li> <li><a href="gradestoenter.php">Grades</a></li> <li><a href="gradestoenterold.php">Grades (Old System)</a></li> <!-- <li><a href="reportprogram.php">Program Totals</a></li> --> <!-- <li><a href="ministryaction.php">IMS Action</a></li> --> <!-- <li><a href="exitneedsaction.php">Exited Needs Action</a></li> --> </ul> </li> <li class="has-dropdown"> <a href="#">Reporting</a> <ul class="dropdown"> <li><a href="newregcsv.php">New Reg CSV for</a></li> <li><a href="newregcsv.php">New Reg CSV for</a></li> <li><a href="activenoeois.php">Active - No</a></li> <li><a href="banneraction.php">Action</a></li> <li><a href="3monthfu.php">Exit 3-Month Follow-up</a></li> <li><a href="6monthfu.php">Exit 6-Month Follow-up</a></li> <li><a href="12monthfu.php">Exit 12-Month Follow-up</a></li> </ul> </li> <li class="has-dropdown"> <a href="#">Counsellor</a> <ul class="dropdown"> <li><a href="notattending.php">100 Day No Attendance</a></li> <li><a href="activenoclasses.php">Active - No Classes</a></li> <!-- <li><a href="3monthpause.php">Pause 3-Month Follow-up</a></li> --> <!-- <li><a href="allonpause.php">All Paused Students</a></li> --> </ul> </li> <li class="has-dropdown"> <a href="#">DUP</a> <ul class="dropdown"> <li><a href="activenoeoisd.php">Active - No</a></li> <li><a href="banneractiond.php">Banner Action</a></li> <li><a href="3monthfud.php">Exit 3-Month Follow-up</a></li> <li><a href="6monthfud.php">Exit 6-Month Follow-up</a></li> <li><a href="12monthfud.php">Exit 12-Month Follow-up</a></li> <li><a href="notattendingd.php">100 Day No Attendance</a></li> <li><a href="activenoclassesd.php">Active - No Classes</a></li> <!-- <li><a href="3monthpaused.php">Pause 3-Month Follow-up</a></li> --> <!-- <li><a href="allonpaused.php">All Paused Students</a></li> --> <!-- <li><a href="exitneedsactiond.php">Exited Needs Action</a></li> --> </ul> </li> </ul> </li> <li class="has-dropdown"> <a href="#">Account</a> <ul class="dropdown"> <!-- <li class="active"><a href="#">Right Button Active</a></li> --> <li><a href="mailto:">Request Access</a></li> <li><a href="mailto:">Report Bugs</a></li> <li><a href="login.php">Login</a></li> <li><a href="editemp.php?enum=">Edit Your Account</a></li> <li><a href="logout.php">Logout</a></li> </ul> </li> <!-- Reports Dropdown Ends --> </ul> <!-- Left Nav Ends --> <!-- Right Nav Section --> <ul class="right"> <li class="has-form"> <form name="form" action="select.php" method="get"> <div class="row collapse"> <div class="large-8 small-9 columns"> <input type="text" name="search" id="search" style="height: 29px" placeholder=""> </div> <div class="large-4 small-3 columns"> <input type="submit" class="button expand" value="Search"> </div> </div> </form> </li> </ul> <!-- End Right Nav Section --> </section> </nav> </div>

所以我想知道的是：桌面工作得很完美。当我缩小到手机屏幕大小，执行搜索时，搜索栏现在会接管整个菜单，而不会像预期的那样显示汉堡包菜单。有人能提出解决办法吗？非常感谢

欢迎来到StackOverflow！请阅读抱歉，必须切换计算机以复制和粘贴代码。问题现在已经完成了。您的代码段太大太复杂了，不应该包含PHP。请用CSS创建一个简化的、最小的演示。没问题，我会修好的。好的，已经浓缩了。我知道它仍然很长，但我犹豫是否要删除更多的代码，以防我删除问题本身。提前感谢任何能找到搜索栏为什么占据移动视图中整个菜单的人。