Question

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

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

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

让我们说，有人安装了不同的类型，6.3 rem的宽度可能不是与上面的空格相同的数量（PORTFOLIO按钮）。

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

以下是使用的代码：

#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。

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

2 个答案: