CSS：下拉菜单中的水平宽度问题

Question

我遇到了 CSS 下拉菜单的问题，您可以在此处查看：studio-scs.de。

仅在一个点（投资组合）下，有一个下拉菜单可指向更多点。 问题是我需要像 PORTFOLIO 按钮一样宽度。

如果我给它一个固定的宽度，例如“宽度：6.3rem;”，它看起来还不错， 但只要没有人在他的计算机上安装不同的类型，因为 这些按钮的长度是可变的，这使它们看起来更美观。

假设有人安装了不同的类型，6.3 rem 的宽度可能不是 与上面的空间相同（投资组合按钮）。

幸运的是，下拉菜单按钮/单词都比投资组合短。所以我认为 这个问题可能有解决方案。

这里是使用的代码：

#nav {display: block; float: left; margin: 0 auto; width: 100%; font-size: 0.75rem;}
#nav ul, div.menu ul {list-style: none; margin: 0; padding: 0;}
#nav li, div.menu li {float: left; position: relative;}
#nav ul ul {display: none; position: absolute; top: 3.4rem; left: 0; float: left; width: auto; z-index: 99999;}
#nav a {color: #333; display: block; padding: 0 1.1rem; text-decoration: none; font-weight: normal; background: rgba(255, 255, 255, .7); margin: 0 0 0 2px;}
#nav ul li:hover > ul {display: block;}
#nav li:hover > a, #nav ul ul :hover > a {color: #888; background: rgba(255, 255, 255, .9);}
     #nav ul ul a {background: rgba(255, 255, 255, .7); text-align: center; line-height: 1rem; width: inherit; padding: 10px 15px; height: auto; margin: 2px 0 0 2px}
#nav ul li.current_page_item > a, #nav ul li.current-menu-ancestor > a, #nav ul li.current-menu-item > a, #nav ul li.current-menu-parent > a {background: rgba(255, 255, 255, .8);}

我在该字段中进一步添加的行是带有下拉菜单/选项的行。 我尝试使用width: inherit; 解决它，但这也无济于事。

Answer 1

您可以使用 JS 来比较父元素和子菜单的宽度。而不是将宽度更改为最大的宽度。

$(document).ready(function (){

  $('.menu-item-has-children').each(function(){
    var parent = $(this);
    var child = parent.children('.sub-menu');
    if(parent.width() >= child.width()){
      child.width( parent.width() );
    } else {
      parent.width( child.width() );
    }
 });

});

并更改 CSS 样式：

ul.sub-menu li {
    float: none;
    width: 100%;
    display: block;
}
ul.sub-menu li > a {
    width: auto; /* or just remove this line from your code */
}

编辑：

javascript 稍作修改，这是一个有效的pen

Answer 2

这比想象的要容易：

#nav ul.sub-menu {width: 100%;}
#nav ul.sub-menu li {float: none; display: block;}

... 无需 JS 即可解决问题。