Question

我希望我的桌面菜单在选择时可以延伸到页面的一半。

这是我的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>`

我尝试了

@media (max-width: 1920px) and (min-width: 768px) {#menu {width: 50%}}

这与我遇到的另一个问题有关，即如何仅用fa fa-bars替换父菜单项，所以现在它进入bars-> home-> angle down-main menu，而应该进入-bars- >主菜单。

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

与此相关，菜单在桌面上无法正确滚动。 https://adsler.co.uk

Answer 1

看看您在评论中提供的示例页面，我认为您可以尝试：

#menu {
  left: calc(100% - 50vw);
  width: 50vw;
}

（如果仅应将其应用于特定的屏幕尺寸，则在@media中。）

当前，由于菜单menu-item相对位置较高，因此菜单不会展开。绝对定位的元素会根据相对定位的父元素检查其边界在哪里。

大众单元上的更多信息：

https://www.w3schools.com/cssref/css_units.asp和 https://css-tricks.com/fun-viewport-units/

更多位置信息

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

（我希望这是有道理的。）

如何在WordPress中设置桌面菜单宽度样式？

1 个答案: