需要使子菜单全屏

Question

使用 css 如何使子菜单从屏幕左侧开始，而不是从父项下开始。

 nav { margin: 0 auto; text-align: center; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { list-style: none; } nav ul li { float: left; } nav ul li:hover a { color: #000000; margin-bottom:5px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } nav ul li a { display: block; padding: 5px 15px; color: #000000; text-decoration: none; } nav ul ul { border-radius: 0px; padding: 0; position: absolute; } nav ul ul li { float: none; position: relative; } nav ul ul li a { color: #000000; } nav ul ul li a:hover { color: #666666; } nav ul ul ul { position: absolute; top:0; }

 <nav> <ul> <li> <a href="/view_contacts.php">Contacts</a> <ul> <li><a href="add_contact.php">Add Contact</a></li> <li><a href="view_contacts.php">View Contacts</a></li> </ul> </li> <li> <a href="/tickets.php">Tickets</a> <ul> <li><a href="new_ticket.php">New Ticket</a></li> <li><a href="tickets.php">View Tickets</a></li> </ul> </li> <li><a href="/invoices.php">Invoices</a></li> <li><a href="/itemised_calls.php">Itemised Calls</a></li> </ul> </nav>

这是一个jsfiddle： http://jsfiddle.net/jhmkqrye/1/ - 希望它有所帮助

当您在工单上使用 hover 时，它的子菜单从工单下方开始，我想从屏幕宽度开始到屏幕宽度结束的联系人下方开始。

Answer 1

您可以尝试将父position设置为相对和子的absolute ，然后使用left, right, bottom, top设置 position

例如left: 0; 会将您的子项目放在最左边

编辑：jsfiddle正确吗？ 因为我似乎在 hover 上找不到任何子菜单，点击它会抛出 404