【发布时间】：2021-06-18 16:54:23
【问题描述】：
我正忙于处理菜单，使用 posistion: absolute; 时似乎无法获得正确的对齐方式，但如果我不这样做，它会拉伸我的导航栏。
当 Wordpress 生成菜单时，很难显示 Html 但我会尽力解决问题所在。
.menu{
display: flex;
list-style: none;
}
*{
font-family: 'Quicksand', sans-serif!important;
}
.j-c{
justify-content: center;
}
.flex{
display: flex;
}
.menu li{
margin: 5px;
padding: 5px;
font-size: 15px;
font-weight: 300;
color:black;
}
.menu *{
color:black;
}
.logo{
max-width: 100px;
image-rendering: -webkit-optimize-contrast;
margin-bottom:-25px;
}
.primary_menu{
display: flex;
align-items: center;
}
.j-c{
background-color: white;
box-shadow: grey 2px -1px 5px 0px;
align-items: flex-end;
}
.sub-menu{
display: none;
list-style: none;
padding-left:0px;
}
.sub-menu li{
margin:0px;
padding:0px;
}
.sub-menu *{
color:#25A5D6!important;
}
.sub-menu hr{
margin:2px;
}
#menu-item-30:hover{
}
#menu-item-30:hover .sub-menu{
display: block;
}<div class="flex j-c">
<a href="http://localhost/mall-ads/"><img class="logo" src="http://localhost/mall-ads/wp-content/uploads/2021/06/Logo-1.png"></a>
<div class="primary_menu"><ul id="menu-main" class="menu"><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost/mall-ads/landing/">Home</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://localhost/mall-ads/about/">About Us</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://localhost/mall-ads/audience/">Our Audience</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30" style="
/* position: absolute; */
"><a href="http://localhost/mall-ads/offerings/">Our Offerings</a>
<ul class="sub-menu">
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-51"><a href="http://localhost/mall-ads/offering/mall-tv/">MALL TV</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#"><hr></a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-50"><a href="http://localhost/mall-ads/offering/mall-classic/">MALL CLASSIC</a></li>
<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="#"><hr></a></li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-49"><a href="http://localhost/mall-ads/offering/mall-active/">MALL ACTIVE</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="#"><hr></a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/mall-ads/footprint/">Our Footprint</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://localhost/mall-ads/news/">News</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://localhost/mall-ads/contact/">Contact Us</a></li>
</ul></div> </div>片段是我当前的设置，图像是我正在寻找的最终结果。 因此，如果您看到我试图获得悬停效果以不移动菜单但也不拉伸我的菜单栏（带有框阴影的白色块），这样我就可以在菜单项上有一个背景，然后填充子-菜单来创建彼此成比例的灰色小盒子。
我如何做到这一点？
TLDR：我想让我的子菜单具有绝对定位（因为不拉伸整个菜单栏）但是为了使菜单项仍然与子菜单成比例，我需要实现这种行为，因为我抛出了 css无法更改生成的 HTML
【问题讨论】：
-
它的
position: absolute;而不是posistion:absolute; -
只是为了便于解释而添加的，但我确实修改了内容