下拉列表的ul和li宽度未正确显示

Question

我正在制作一个下拉菜单但由于某种原因，下拉列表的宽度不起作用。

我试过制作一个小提琴，但我不能让它与角部分一起工作。

我正在使用angular，所以这是我的HTML：

<ul id="main-menu">
    <li data-ng-repeat="item in mainMenu" data-ng-switch on="item">{{item}}
        <ul data-ng-switch-when="Mina sidor">
            <li data-ng-repeat="subitem in subMenu.myPages">{{subitem}}</li>
        </ul>
    </li>
</ul>

CSS（我正在使用SASS，所以格式有点笨拙，我为此道歉）：

body, #main-menu, #main-menu li ul {
    margin: 0;
    padding: 0; }

body {
    width: 100%; }

#main-menu {
    list-style: none; }

  #main-menu li:nth-child(even) {
    background: red; }

  #main-menu li {
    width: 12.5%;
    display: inline-block;
    text-align: center; }

    #main-menu li ul {
      display: none;
      width: inherit; }

      #main-menu li ul li {
        height: 30px;
        line-height: 30px;
        width: inherit;
        height: 30px;
        background: pink;
        display: block;
        text-align: left;
        margin: 0; }

  #main-menu li:nth-child(4) {
    position: relative; }

    #main-menu li:nth-child(4):hover ul {
      position: absolute;
      display: block;
      background: yellow; }

以下是问题所在：

ul下拉列表和它的宽度由于某种原因不起作用，即使控制台中的盒子模型显示它们的宽度实际上是12.5％。他们为什么不伸展到这个宽度？

编辑：我将下拉列表的宽度设置为12.5％而不是100％，现在效果很好。