如何在下拉菜单中构建具有自动宽度子菜单项的wordpress菜单，而没有任何子菜单项共享一行（并排显示）。但具有下拉项目的自动宽度，无需设置预定义的宽度。我试过这个密码
<html>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet
Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">longwordtestsubjecT</a></li>
</ul>
</li>
</ul>
</header>
<style>
li{
display: inline-block !important;
padding-top: 5px;
float: right;
font-size: 17px;
line-height: 26px;
font-weight: 500;
margin: 0 38px 0 0;
position: relative;
text-transform: uppercase;
text-decoration: none;
}
ul li {
float:left;
position:relative;
text-transform:uppercase;
list-style:none
}
ul li a {
display:block;
color:#000;
padding:5px 15px;
font-size:14px;
color: #808080;
text-decoration: none;
}
/* Second Level */
ul li ul
{
display:none;
}
ul li ul li a
{
width:auto;
display:block;
}
ul li:hover ul {
display:block;
position:absolute;
top:26px;
}
/* Third Level */
ul li ul li ul li
{
list-style:inside square
}
ul li ul li ul li a
{font-size:11px;
color:#ddd}
</style>
</html>
这就是我得到的！子菜单项并排显示，而不是在各自的行中。。。
我希望它看起来像这样，但仍然保持自动宽度
最合适的回答,由SO网友:Mauricio Gtz 整理而成
您没有为第二个列表中的每个项目定义特定宽度，可以使用以下内容修改子菜单的样式：
ul li ul li {
float: none;
display: block;
width: 100%;
}
它将如下所示：
您还可以尝试使用CSS网格或CSS Flex来完成该结构。
