html - 如何在桌面扩展菜单宽度？

Question

我的下拉菜单在移动设备上很好，但在桌面上不会超出单词home或菜单栏。我希望它在单击时拉伸整个页面宽度。请问我该怎么做？

我试过CSS：

@media (max-width: 5000px) and (min-width: 768) 
{#menu {width: 100%! Important;}}

它甚至没有让步一毫米。

html:

<div class="module widget-handle mobile-toggle right 
visible-sm visible-xs"><i class="fa fa-bars"></i></div><div 
class="module-group right"><div class="module left"><div 
class="collapse navbar-collapse navbar-ex1-collapse"><ul 
id="menu" class="menu"><li id="menu-item-1496" 
class="menu-item menu-item-type-post_type menu-item- 
object-page menu-item-home current-menu-item 
page_item page-item-19 current_page_item menu-item- 
has-children menu-item-1496 dropdown active"><a 
title="Home" href="https://adsler.co.uk/">Home </a>. 
<span class="dropdown-toggle shapely-dropdown" data-          
toggle="dropdown"><i class="fa fa-angle-down" aria- 
hidden="true"></i></span><ul role="menu" class=" 
dropdown-menu"><li id="menu-item-1502" class="fa fa- 
user menu-item menu-item-type-post_type menu-item- 
object-page menu-item-1502"><a title="Create Adsler 
Account" href="https://adsler.co.uk/create- 
account/">Create Adsler Account</a></li><li id="menu- 
item-1499" class="fa fa-envelope menu-item menu-item- 
type-post_type menu-item-object-page menu-item- 
1499"><a title="Post 

标签： htmlcsswordpress

Answer 1

使用此 CSS 获得更好的用户体验

.main-navigation .menu > li ul { padding: 10px; right: 0 !important;}
.main-navigation .menu > li > ul > li { display: flex; align-items: center;}

尝试从这里删除这个左 0

.main-navigation .menu > li ul {  left: 0; }
style.css line #1448